AI-FIRST DESIGN WORKFLOW

Claude Code UI 设计风格与前端提示词

Claude Code 负责生成代码，StyleKit 负责把“看起来像什么”说清楚。先锁定风格和页面场景，再给 Claude Code 明确的 tokens、组件边界、状态和验收标准。

浏览 UI 设计风格查看 UI 提示词

一份可执行的 UI 设计 brief 包含什么？

视觉规则

颜色、字体层级、间距基线、圆角、边框、阴影和明暗模式，不只是一句风格形容词。

组件约束

把导航、卡片、按钮、表单、表格和空状态写成可复用的组件行为，减少 AI 每次自由发挥。

验收条件

补上响应式断点、可访问性、交互状态和不能出现的元素，让生成结果更接近你的目标。

用 Claude Code 开始一个项目的顺序

1
先从风格目录选择一个视觉方向，并打开它的颜色、tokens 和组件说明。
2
把页面目标、用户、内容结构和风格约束合并成一段 brief，不要只说“做得高级一点”。
3
让 Claude Code 先搭建信息架构和组件骨架，再逐块实现视觉效果，最后用移动端和键盘操作验收。

Prompt skeleton

Build a Claude Code interface using one StyleKit visual direction.

Include:
- explicit colors, typography, spacing, radii, and shadows
- reusable components with hover, focus, loading, and empty states
- responsive behavior and keyboard-accessible controls
- a short list of visual choices that must not drift

从风格约束开始，而不是从随机灵感开始

每个风格页面都可以作为 AI 的上下文来源。选择一个方向后，再按页面场景调整密度和组件，而不是把多个互相冲突的风格词堆在同一个 prompt 里。

新野兽派

大胆的黑色粗边框、硬边缘阴影、无圆角、高对比度配色。源于建筑野兽派，强调功能与原始美学。包含经典、柔和、俏皮三种变体。

编辑杂志风

优雅的杂志排版风格，衬线标题、无衬线正文、精致的留白和网格系统。灵感来自高端时尚杂志和报纸排版。

新拟物派

柔和的内凹外凸立体效果，通过双重阴影模拟光源，浅色背景配同色系元素，营造精致的立体感。

便当盒布局

灵感源于日式便当盒的不规则网格布局，通过大小不一的卡片组合创造视觉层次，常用于作品集和产品展示。

企业简洁风

专业简洁的企业风格，强调可读性、一致性和信任感。适合B2B SaaS、企业官网、后台管理系统。

极简扁平风

极致简约的扁平设计，无阴影无渐变，通过颜色和留白创造层次。适合作品集、创意机构、艺术网站。

浏览 UI 设计风格 →

继续深入

UI 提示词库 →

按页面类型和视觉主题寻找可复制的前端 prompt。

Tailwind UI 提示词 →

把风格约束落到 Tailwind CSS 类名和组件结构。

开发者资源 →

查看 shadcn registry、tokens 和适合 React 项目的资源。

FAQ

Claude Code 能直接使用 StyleKit 吗？

可以把 StyleKit 页面中的设计规则和提示词复制到 Claude Code 的上下文中使用。StyleKit 不依赖某一个模型，重点是让设计约束可读、可复用、可验证。

为什么只写一个风格名称不够？

“玻璃拟态”或“极简”只能表达方向，不能约束实现。颜色、字体、间距、组件状态和响应式规则越具体，AI 越不容易生成一套换个页面就崩掉的界面。

StyleKit 适合什么项目？

适合落地页、SaaS、仪表盘、作品集、后台和组件库等需要统一视觉语言的网页项目，尤其适合在 AI 辅助编码时作为设计上下文。