Vibe Design

Vibe Coding 流水线第 4 步:视觉设计准则。design.md 是【用户提供】的网站视觉设计系统 (Google DESIGN.md / awesome-design-md 格式),本 skill 不画图、不生成视觉,而是 【承接 + 结构化 + 校验】用户提供的视觉来源,固化成标准 design.md,作为下游 vibe-prototype 出图与 vibe-implement 还原的唯一视觉真相。 当用户说"设计准则 / 视觉设计 / 设计系统 / design.md / 把我的设计稿整理成 design.md / 品牌视觉规范 / Style Reference / design tokens / 把我的 Figma 截图变成设计系统 / 这个网站的视觉规范帮我抽出来 / 整理一份配色字体规范"等,想把【用户提供的视觉来源】固化成 结构化、可被 Stitch 与实现消费的标准 design.md 时,必须使用本 skill。 它产出 spec 合规的 design.md(YAML token 前言 + Overview/Colors/Typography/Layout/ Elevation/Shapes/Components/Do&Don't 八章节),并与 idea.md / interaction.md 交叉校验 每个页面 / 组件 / 状态都有对应视觉规范。 反触发(相邻阶段抢入口时主动让路): ① 还没 idea.md(产品想法未定型)→ 交给 vibe-idea; ② 还没 interaction.md(页面与元素交互未定义)→ 交给 vibe-interaction; ③ 还没 architecture.md(技术骨架/数据模型/接口未定)→ 交给 vibe-architecture; ④ 要画原型 / 接 Stitch / 每页出图 → 交给 vibe-prototype; ⑤ 要写代码 / 修 bug / 跑测试 / 部署 → 交给 vibe-implement。 前置依赖 idea.md + interaction.md;视觉来源由用户提供;产物 design.md(视觉)交给 vibe-prototype, 二者以「prototypes/ 必须符合 design.md 的 tokens/components/Do&Don't」为对齐契约。

mkdir -p ~/.claude/skills/vibe-design
curl -L https://claudskills.com/skills/vibe-design/SKILL.md \
  -o ~/.claude/skills/vibe-design/SKILL.md

@misc{vibe-design-2026,
  author    = {idiotLeoLYJ},
  title     = {Vibe Design [Claude Code skill]},
  year      = {2026},
  publisher = {ClaudSkills},
  url       = {https://claudskills.com/skills/vibe-design/}
}