القائمة
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/tabtin-ai/TabTin --skill design-guideيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
Use when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies
Use when you have a written implementation plan to execute in a separate session with review checkpoints
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | design-guide |
| description | 演示设计指导——应用视觉设计原则、规划布局策略、 执行质量检查。做 PPT / 幻灯片视觉设计时参考。 |
| metadata | {"version":"0.3.0","tabtin":{"category":"doc","displayName":"TabSlide 设计原则","autoActivateFor":["tabslide"]}} |
关于"哪些 HTML 模式能被转成可编辑 PPTElement、哪些要走
data-tabslide-rasterize兜底"——参见app:tabslide/html-spec。这里只谈视觉设计层面的取舍。
不要从零手写 CSS 排版——自由发挥的产出普遍是"白底细边框工程师风"，下限很低。
默认走主题模板库：读 references/themes.md，选一套主题
（深色科技 Aurora / 浅色杂志 Journal），整段复制其 <style> 与页型骨架，只替换
内容文字。骨架已保证不出画、版心撑满、配色统一。
只有用户明确指定了模板之外的视觉风格（如品牌 VI、特定配色）时才自行设计， 且仍须遵守下述原则与检查清单。
var(--slide-*) CSS 变量或固定一套 Tailwind 色板（如 blue-500 / purple-600）保持统一| 层级 | 间距 | 用途 |
|---|---|---|
| 页面内边距 | 60-80px | 内容与边缘的距离 |
| 模块间距 | 32-48px | 不同内容块之间 |
| 卡片间距 | 24px | 同级卡片之间 |
| 卡片内边距 | 32px | 卡片内容与边框 |
| 文字行间距 | 8-16px | 段落内行距 |
linear-gradient 背景，适合封面和强调页（仅支持 linear，radial 走 rasterize）var(--slide-bg-subtle) 或 #F8FAFC；深色底用 linear-gradientvar(--slide-*)、Tailwind class（bg-blue-500）、Tailwind arbitrary value（bg-[#2563EB]）、直接 hex/rgba。推荐多页统一一种写法，避免某页跳色--slide-blue/teal/green/orange/red/purple 六色板--slide-primary，其余用低饱和度色| 类型 | 适用场景 | 推荐布局 |
|---|---|---|
| KPI 仪表盘 | 关键指标展示 | slide-grid-3/4 + slide-kpi |
| 对比分析 | A vs B、优劣势 | slide-split + 左右卡片 |
| 流程/时间线 | 步骤、历程 | slide-timeline 或 slide-grid-3 + step-number |
| 图文混排 | 说明 + 配图 | slide-split 或 slide-split-40-60 |
| 数据图表 | 趋势、分布 | ECharts 图表 + 标题 + 注释 |
| 列表要点 | 特性、优势 | slide-list 或图标卡片网格 |
写内容时先按预算裁切，宁可多一页也不要塞满：
| 页型 | 硬上限 |
|---|---|
| 卡片网格（含 icon+标题+说明） | 最多 2 行 × 3 列；每卡标题 ≤8 字、说明 ≤28 字 |
| 双栏列表 | 每栏 ≤6 条；每条 ≤36 字 |
| KPI | 单行最多 4 个；数字+短标签，不要长段落 |
| 图文混排 | 正文 ≤80 字；大图高度预留 ≤360px |
| 通用 | 页边距 ≥60px；标题区 + 内容区合计必须落在 720 高内 |
slide render 会在抽取前做 HTML 布局 lint：html_overflow / html_clipped_text 默认阻断导出。
data-tabslide-rasterize