How to use
- Copy the installation command and review the source package before installing it in your own agent environment.
- Check the source document for required tools, credentials and supported hosts.
- Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/kaikaishenshen/design-complete --skill design-taste-frontendBefore you start
- Installation does not include a model subscription, API allowance or permission to access your files.
- Repository stars and installation counts describe activity, not an independent quality or security test.
Original skill document
Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.
tasteskill：反模板前端技能
落地页、作品集和重新设计。不适用于仪表盘、数据表格或多步骤产品 UI。 以下每条规则都是按上下文触发的，不会自动全部执行。先阅读需求，再提取适合的部分。
0. 需求推断（在做任何事之前先读懂需求）
在触碰代码或调整旋钮之前，推断用户真正想要什么。大多数 LLM 设计输出糟糕是因为模型跳转到默认审美，而非读懂需求。
0.A 先读取这些信号
- 页面类型 - 落地页（SaaS/消费品/代理商/活动）、作品集（开发者/设计师/创意工作室）、重新设计（保持 vs 翻新）、编辑/博客。
- 用户使用的氛围词汇 - "极简"、"宁静"、"Linear 风格"、"Awwwards"、"野兽派"、"高端消费"、"Apple 式"、"好玩"、"严肃 B2B"、"编辑式"、"代理商风格"、"玻璃感"、"暗黑科技"。
- 参考信号 - 他们链接的 URL、粘贴的截图、提到的产品、竞争的品牌。
- 受众 - B2B 采购委员会 vs 注重设计感的消费者 vs 浏览作品集的招聘人员。受众决定审美，不是你的品味。
- 已存在的品牌资产 - 标志、颜色、字体、摄影风格。对于重新设计，这些是起始材料，不是可选输入（参见 Section 11）。
- 隐性约束 - 无障碍优先的受众、公共部门、受监管行业、信任优先的商务、儿童产品。这些约束覆盖审美偏好。
0.B 在生成前输出一行"设计解读"
在任何代码之前，用一行说明："解读为：<页面类型> 面向 <受众>，<氛围> 语言，倾向于 <设计系统或审美家族>。"
示例解读：
- "解读为：B2B SaaS 落地页面向技术买家，Linear 风格极简语言，倾向于 Tailwind utilities + Geist + 克制动效。"
- "解读为：独立设计师作品集面向招聘经理，编辑/动态字体语言，倾向于原生 CSS + 滚动驱动动画 + 自定义字体。"
- "解读为：公共部门服务站点重新设计，信任优先语言，倾向于 GOV.UK Frontend 或 USWDS。"
0.C 如果需求模糊，问一个问题，不要猜测
正好问一个澄清问题——从不问多个——且仅当设计解读确实存在分歧时。示例："应该更接近 Linear 风格还是 Awwwards 实验风格？"
如果可以从上下文自信推断，不要问。直接声明设计解读并继续。
0.D 反默认纪律
不要默认使用：AI 紫色渐变、居中 hero 配深色网格、三个相等功能卡片、通用玻璃态、无限循环微动效、Inter + slate-900。这些是 LLM 的默认值。根据设计解读有意识地去超越它们。
1. 三旋钮（核心配置）
设计解读后，设置三个旋钮。以下所有布局、动效和密度决策都由这些控制。
- `DESIGN_VARIANCE：8` — 1 = 完美对称，10 = 艺术混乱
- `MOTION_INTENSITY：6` — 1 = 静态，10 = 电影/物理动效
- `VISUAL_DENSITY：4` — 1 = 画廊/通风，10 = 驾驶舱/数据密集
基准线： 8 / 6 / 4。除非设计解读覆盖，使用这些值。不要要求用户编辑此文件——覆盖通过对话进行。
1.A 旋钮推断（设计解读 → 旋钮值）
| 信号 | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| "极简/干净/宁静/编辑式/Linear 风格" | 5-6 | 3-4 | 2-3 |
| "高端消费/Apple 式/奢华/品牌" | 7-8 | 5-7 | 3-4 |
| "好玩/狂野/Dribbble/Awwwards/实验性/代理商" | 9-10 | 8-10 | 3-4 |
| "落地页/作品集/营销站点（默认）" | 7-9 | 6-8 | 3-5 |
| "信任优先/公共部门/受监管/无障碍关键" | 3-4 | 2-3 | 4-5 |
| "重新设计 - 保持" | 匹配现有 | +1 | 匹配现有 |
| "重新设计 - 翻新" | +2 | +2 | 匹配现有 |
1.B 用例预设
| 用例 | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| 落地页（SaaS、主流） | 7 | 6 | 4 |
| 落地页（代理商/创意） | 9 | 8 | 3 |
| 落地页（高端消费） | 7 | 6 | 3 |
| 作品集（设计师/工作室） | 8 | 7 | 3 |
| 作品集（开发者） | 6 | 5 | 4 |
| 编辑/博客 | 6 | 4 | 3 |
| 公共部门服务 | 3 | 2 | 5 |
| 重新设计 - 保持 | 匹配 | 匹配+1 | 匹配 |
| 重新设计 - 翻新 | +2 | +2 | 匹配 |
1.C 旋钮如何驱动输出
将这些（或用户覆盖的值）作为全局变量使用。本文档中的交叉引用指向这些确切的变量名——绝不创建像 LAYOUT_VARIANCE 或 ANIM_LEVEL 这样的别名。
2. 需求 → 设计系统映射
2.A 框架/设计系统选择
| 信号 | 推荐系统 |
|---|---|
| "SaaS 落地页 / 品牌站点" | Tailwind v4 + shadcn/ui（基于 class）或 Tailwind v4 + React Aria（基于 render-prop） |
| "作品集 / 创意站点" | Astro + 自定义 CSS / Tailwind |
| "重新设计 / 现有项目" | 匹配现有系统。不要引入第二个 |
| "静态 / 内容站点" | Astro / 11ty |
| "快速原型" | 单 HTML 文件 |
2.B 次要信号 → 基调调整
| 信号 | 调整 |
|---|---|
| "B2B / 企业" | 降低 VARIANCE 1-2 档 |
| "创业 / 消费" | 接受更高 VARIANCE |
| "信任优先（金融/医疗）" | 降低 VARIANCE，增加 DENSITY |
| "公共部门 / 政府" | VARIANCE ≤ 4，MOTION ≤ 3 |
3. 氛围与质感原型
选择 1 个氛围原型和 1 个布局原型。这些定义整体感觉。
3.A 氛围（Vibe）原型
Ethereal Glass（空灵玻璃感）
- 颜色： 冷色中性色、淡蓝/紫色调、解构主义柔光
- 排版： 锐利几何无衬线 + 优雅衬线
- 动效： 流畅滚动揭示、鼠标追踪视差
- 纹理： 低透明度玻璃效果、径向光斑
- 适合： AI/SaaS 消费品牌、创意工作室
Editorial Luxury（编辑式奢华）
- 颜色： 暖色中性色、深墨色、编辑摄影
- 排版： 衬线展示 + 无衬线正文、慷慨字号
- 动效： 微妙的滚动触发行进
- 纹理： 富文本质感、大幅摄影
- 适合： 奢侈品牌、杂志风格、高端代理
Soft Structuralism（柔和结构主义）
- 颜色： 暖色米色/骨色基底、大胆强调色、深色文字
- 排版： 展示粗无衬线 + 常规正文、清晰层级
- 动效： 卡片的悬停提升、小幅交错入场
- 纹理： 干净边框、扁平表面、几何模板
- 适合： 设计作品集、创意 SaaS、B2B 品牌
3.B 布局（Layout）原型
Asymmetrical Bento（不对称便当盒）
- 网格列大小不一，跨越的元素
- 没有两个相同大小的卡片
- 使用 CSS Grid，
grid-template-areas显式 - 动态度：中等至高
Z-Axis Cascade（Z 轴瀑布）
- 元素在向下滚动时分层
- 前一个元素部分重叠固定或创建视差感
- 需要滚动驱动动画
- 动态度：高
Editorial Split（编辑式分割）
- 左侧文字，右侧视觉（或交替）
- 清晰分隔区域
- 大幅摄影/艺术
- 动态度：低至中等
3.C 移动端折叠决策
对于每个布局原型，必要定义移动端行为：
- Bento： 所有列在移动端塌缩为单列。改变变化顺序。
- Z-Axis： 在移动端平面化为标准滚动。移除分层效果。
- Split： 移动端上下堆叠。视觉在上或下取决于上下文。
4. 绝对负面约束（禁止元素）
AI 必须严格避免以下通用 Web 开发默认值：
- 不要使用 "Inter"、"Roboto" 或 "Open Sans" 字体
- 不要使用通用细线图标库如 "Lucide"、"Feather" 或标准 "Heroicons"
- 不要使用 Tailwind 的默认重投影（如
shadow-md、shadow-lg、shadow-xl）。阴影必须几乎不存在或高度自定义为超扩散低透明度（< 0.05） - 不要为大区域或部分使用主色背景（无亮蓝、绿或红 hero 区域）
- 不要使用渐变、霓虹色或 3D 玻璃态（除微妙的导航栏模糊外）
- 不要为大型容器、卡片或主要按钮使用
rounded-full - 代码、标记、文本内容、标题或 alt 文本中不使用 emoji。用合适的图标或干净的 SVG 原语替代
- 不要使用通用占位符名称如 "某某某" 或 "公司名"。使用真实、有上下文的内容
- 不要使用 AI 文案套话："革新"、"无缝体验"、"颠覆"、"下一代"、"革命性"、"极致"。写朴素、具体的语言
5. 排版架构
界面必须依靠极端的排版对比和优质字体选择来建立编辑式感觉。
- 主无衬线（正文、UI、按钮）： 使用有特色的干净几何或系统原生字体。目标：
'SF Pro Display'、'Geist'、'Helvetica Neue'等 - 编辑衬线（Hero 标题和引用）： 目标：
'Newsreader'、'Playfair Display'、'Instrument Serif'等。使用紧密字间距（-0.02em到-0.04em）和紧凑行高（1.1） - 等宽（代码、按键、元数据）： 目标：
'Geist Mono'、'SF Mono'、'JetBrains Mono' - 文字颜色： 正文字体绝不能是纯黑（
#000000）。使用近黑/炭黑（#111111或#2F3437），行高1.6。次要文字应为柔和灰（#787774）
6. 调色板（暖单色 + 点缀柔和色）
颜色是稀缺资源，仅用于语义含义或微妙点缀。
- 画布/背景：纯白
#FFFFFF或暖骨色/近白#F7F6F3 - 主表面（卡片）：
#FFFFFF或#F9F9F8 - 结构边框/分隔线：超浅灰
#EAEAEA或rgba(0,0,0,0.06) - 强调色：仅使用高度不饱和的淡色
7. 组件规范
- 便当盒功能网格： 使用不对称 CSS Grid 布局。卡片必须为
border: 1px solid #EAEAEA。圆角8px或12px最大。内部间距慷慨（24px到40px） - 主要 CTA（按钮）： 实色背景
#111111，文字#FFFFFF。轻微圆角（4px到6px）。无投影。悬停为微妙颜色变化或scale(0.98) - 标签和状态标记： 药丸形状（
border-radius: 9999px），极小字体（text-xs），大写宽间距 - 手风琴（FAQ）： 移除所有容器框。仅用
border-bottom: 1px solid #EAEAEA分隔项目
8. 预输出检查清单
在交付任何界面之前执行：
排版
- [ ] 未使用 Inter、Roboto 或 Open Sans
- [ ] 字体系列 ≤ 3
- [ ] Hero 标题
clamp()最大值 ≤ 6rem - [ ] 正文行长度 ≤ 75ch
- [ ] 字体对比度：正文字重 ≥ 400，标题 ≥ 600
- [ ] 正文无全大写
布局
- [ ] 卡片嵌套已修复
- [ ] 间距各不相同以创造节奏
- [ ] 移动端折叠已实现
- [ ] 触摸目标 ≥ 44px 在移动端
- [ ] 语义化 z-index 层级（无 999/9999）
色彩
- [ ] 正文对比度 ≥ 4.5:1
- [ ] 大号文字对比度 ≥ 3:1
- [ ] 无纯黑（
#000000）或纯白（#FFFFFF）文字 - [ ] 无渐变文字
- [ ] 无 AI 紫蓝渐变
动效
- [ ] 所有动画使用
prefers-reduced-motion降级 - [ ] 无弹跳/弹性缓动
- [ ] 交错入场使用
calc(var(--index) * delay) - [ ] 仅动画
transform+opacity（非 layout 属性）
内容
- [ ] 无占位符或 Lorem ipsum
- [ ] 无营销套话
- [ ] 按钮标签：动词 + 对象
- [ ] 无 emoji
- [ ] 无 AI 文案陈词滥调
反模式
- [ ] 无侧边条纹边框
- [ ] 无眼眉标在每个区域上方
- [ ] 无编号部分标记（01/02/03）作为默认
- [ ] 无 hero-metric 模板
- [ ] 无玻璃态作为默认
- [ ] 无纯灰阴影
