// docs / skills
风格技能
风格技能（Style Skills）让用户在生成前注入视觉风格指南。 每个技能是一个 Markdown 文件，描述色彩哲学、字体规则和组件风格。
概览
技能文件存放在 public/skills/ 目录下（远不止文档示例中的四个； 前端通过 /api/skills 枚举）。用户在首页 prompt 输入框中输入 / 触发技能菜单，选择后可将内容作为用户意图的一部分注入生成流程。
public/skills/ ├── minimal.md ├── bold.md ├── glassmorphism.md ├── brutalist.md └── …（其余路由级风格模板，随仓库扩展）
每个文件是纯 Markdown，包含三个部分：视觉方向（Visual Direction）、 组件风格（Component Style）、色调描述（Tone）。
可用技能
/minimal极简大量留白，单色调，字体主导。瑞士设计、Dieter Rams 风格。
/bold大胆高对比度，超大字体，强烈色彩分区。Stripe、Linear 营销页风格。
/glassmorphism玻璃拟态毛玻璃效果，半透明层次，纵深感。macOS Big Sur、iOS 小组件风格。
/brutalist野兽派原始网格，强烈对比，反精致。实验性排版，粗犷边框。
注入流程
从用户选择到实际生效的完整链路：
1. 用户在 HeroPrompt 输入 /minimal
2. useSlashMenu 弹出技能菜单
3. 选择后 → fetch /skills/minimal.md 获取完整内容
4. 显示 badge："/minimal style applied"
5. 提交时：
POST /api/projects { userPrompt: "...", styleGuide: "# Minimal Style..." }
6. 服务端返回 projectId + styleGuide
7. 前端存入 sessionStorage["styleGuide:{projectId}"]
8. handleRun() 读取 sessionStorage，传给 /api/ai
9. /api/ai 传给 runGenerateProject({ styleGuide })
10. styleGuide 仅注入 generateProjectDesignSystem 步骤
（截断到 1200 字符）analyzeProjectRequirement 步骤。 完整 skill 文档 + 用户 prompt 会导致该步骤的 prompt 过大，触发 LLM 超时（实际发生过）。两条风格通路
当前管道里与「风格」相关的逻辑分成两类，切勿混淆：
用户 styleGuide（public/skills + / 菜单）
提交时写入 styleGuide，截断后主要注入 generate_project_design_system，避免撑爆 analyze prompt。
Hero 运行时组件 skill
仅在 page_implement_agent 启动前、且策略命中时为该页 discoverAndSelectSkill；正文进入该页 Agent 的 user 消息，用于 Hero 特效级指引。
菜单与菜谱分离
运行时选型阶段尽量只传技能的 metadata / 短摘要；只有在确定选中后才读取完整 Markdown 正文， 以降低 LLM 往返与重复 token。
自定义技能
添加新技能只需在 public/skills/ 下创建一个 Markdown 文件。 文件名即为技能 ID，会自动出现在 /api/skills 列表和前端菜单中。
# My Custom Style ## Visual Direction - 描述你的视觉方向... ## Component Style - 描述组件风格... ## Tone 描述整体调性...