SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场idea2design

idea2design

设计与创作

查看项目

更新于 10-16 09:24

技能介绍

用途

idea2design 用于从文字描述生成完整的设计规范，产出 .design/ 目录及结构化 Markdown 规范，为 AI 驱动的 UI 生成做好准备。无需 Figma。

适用场景：已有设计概念、品牌简报或产品描述，但还没有 Figma 文件。若已有 Figma 文件，改用 /figma2design <url>，该命令还会提取截图、品牌资源与自定义图标。

使用方式

命令形式：

  • /idea2design —— 交互式，提示输入设计需求
  • /idea2design "SaaS dashboard…" —— 内联，从简短简报生成

前置条件：Claude Code (claude.ai/code)；无需外部依赖；无需 Figma MCP。

主要能力与产出

生成的 .design/ 目录结构：

.design/ ├── DESIGN.md # 设计 token（颜色、字体、间距、形状） ├── CODE_PATTERNS.md # 目标技术栈 + 代码约定 + 布局模式 ├── COMPONENTS.md # 组件行为规格（TypeScript props、状态表） ├── PAGES.md # 页面级规格（ASCII 布局图、数据流） └── ICONS.md # 图标清单（Lucide 映射、尺寸约定）

各文件回答 UI 生成器的不同问题：

  • DESIGN.md：用什么颜色、字体、间距和形状？
  • CODE_PATTERNS.md：用什么技术栈？如何组织代码？
  • COMPONENTS.md：这个组件接收哪些 props？有哪些状态？
  • PAGES.md：哪些组件放在哪里？数据如何流动？
  • ICONS.md：那是哪个图标？从哪里导入？

注意：screenshots/、brand/ 与 icons/ 目录不在此生成，它们需要 Figma 来源，请使用 /figma2design。

调用后的执行步骤

Step 1 — 收集设计输入

若未提供内联简报，提示用户：

请描述你的设计需求：

  1. 产品/品牌描述：这个产品是什么？面向谁？
  2. 设计风格：minimal / playful / enterprise / editorial / 其他？
  3. 核心页面：列出主要页面及其用途（如：首页、列表页、详情页）
  4. 颜色偏好：有品牌色吗？偏好冷色/暖色/中性？
  5. 目标平台：Web / Mobile / Desktop？
  6. 技术栈：React + Tailwind / Vue + Element / 其他？

接受部分输入——根据上下文为缺失字段推断合理默认值。所有假设记录在 DESIGN.md 中。

Step 2 — 生成设计 token

创建 .design/DESIGN.md，包含一致且可投产的 token 系统：

  • 调色板：primary、secondary、neutral scale（50–900）、accent、semantic（success/warning/error/info）
  • 字体级差：字体族（正文 + 标题 + 等宽）、字号（xs–3xl）、字重、行高
  • 间距级差：基于 4px 或 8px 网格（space-1 至 space-12）
  • 圆角：xs、sm、md、lg、xl、full
  • 阴影：sm、md、lg、xl

所有 token 按语义命名：bg-page、text-primary、radius-card、shadow-card-hover，绝不用位置命名（gray-500）。

在 DESIGN.md 顶部使用 YAML frontmatter：

source: idea2design generated: true style: <inferred-style-keyword> platform: <inferred-platform>

Step 3 — 生成代码模式

创建 .design/CODE_PATTERNS.md，包含：

  • 目标技术栈（从输入推断，默认：React + TypeScript + Tailwind）
  • 文件与组件命名约定
  • 布局系统：容器宽度、断点值、网格列数
  • 本设计中最常见的 3 种模式的代码示例（如卡片布局、表单字段、导航项）

Step 4 — 生成组件规格

创建 .design/COMPONENTS.md，包含：

  • 所描述页面涉及的所有核心组件（Button、Card、Input、Nav、Modal、Badge、Avatar 等）
  • 每个组件的 TypeScript prop 接口
  • 状态表：default / hover / active / disabled / error / loading（适用时）
  • 交互行为（点击、聚焦、键盘导航时发生什么）
  • 组件按原子到复合排序（Button、Input → SearchBar、DataTable），与 /design2code 的生成顺序一致

Step 5 — 生成页面规格

创建 .design/PAGES.md，包含：

  • 每个页面的 ASCII 布局图（使用制表字符）
  • 每个页面的组件构成（使用 COMPONENTS.md 中的哪些组件）
  • 数据流：哪些数据进入页面，用户可执行哪些操作
  • 页面级交互：模态框、抽屉、内联编辑、分页

Step 6 — 生成图标清单

创建 .design/ICONS.md，包含：

  • 页面中描述的所有常见 UI 操作的 Lucide 图标映射（search、send、settings、close 等）
  • 尺寸约定：16px 内联、20px 默认、24px 强调、32px 品牌
  • 分类分组：navigation、actions、status、content-type

Step 7 — 验证并报告

mkdir -p .design echo "=== .design/ structure ===" find .design -type f | sort | while read f; do size=$(du -h "$f" | cut -f1) echo " ${f#.design/} ($size)" done

向用户报告：

✅ 设计规范生成完成！.design/ 目录:

DESIGN.md (N行) 设计系统 token + 视觉规范 CODE_PATTERNS.md (N行) 技术栈 + 代码约定 COMPONENTS.md (N行) N个组件行为规格 PAGES.md (N行) N个页面完整规格 ICONS.md (N行) 图标清单

运行 /design2code 即可基于此规范生成 UI 代码。 如需补充品牌资源和截图，可用 /figma2design 从 Figma 文件提取。

边界情况处理

模糊或极少的输入

若用户只提供产品名或一句话：

  • 进行一轮澄清：“请补充：目标用户是谁？主要功能是什么？风格偏好？”
  • 若仍信息很少，做出有主见的默认选择，并在 DESIGN.md 的“## Assumptions”小节中明确记录

已有代码库

若用户在既有项目中工作：

  • 在生成 CODE_PATTERNS.md 前扫描 package.json 以检测技术栈
  • 匹配既有命名约定（检查 src/ 结构）
  • 在 DESIGN.md 中注明哪些 token 是新增的，哪些应对齐既有值

移动优先设计

若目标平台为移动端：

  • 使用 4px 间距网格（比 Web 默认的 8px 更紧凑）
  • 优先采用适合触控的组件尺寸（最小 44×44 点击目标）
  • 在 PAGES.md 中注明布局默认单列

最佳效果建议

  • 页面描述要具体——“首页 + 列表页 + 详情页”比“几个屏幕”效果更好
  • 命名风格——“linear.app style”或“Notion style”可为 token 生成提供强锚点
  • 提及真实竞品——AI 可参考知名产品的常见模式
  • 迭代——查看首次输出后，可用 --update 再次运行 /idea2design 以细化特定文件

限制

若无 Figma 来源，不生成 screenshots/、brand/ 与 icons/ 目录；这些需使用 /figma2design。其他关于收费、价格、平台支持范围等信息暂未提供。