Communitygithub.com

ChaseSunstrom/directions

当需要为新的UI提供视觉风格时使用:生成六种独特的设计方向,并将选中的方案保存为DESIGN.md。

directions 是什么?

这个技能为AI智能体(如Claude Code、Smith)提供了一套结构化的流程,用于从单个产品描述中生成六种不同的UI风格方向。它适用于Web和App界面,当用户要求“设计风格”或“外观”时自动启动。该技能会从120种预定义的“视觉元素库”(LSP库)中挑选方向,这些库涵盖了色彩、排版、布局、动效和对比度等关键设计决策。用户可以手动选择一个方向,也可以让智能体根据上下文自动决定。选中的方向会被写入`DESIGN.md`文件,包含详细的实现指导(如色彩对比度、签名动效、禁止使用的默认项等)。该技能还支持强分歧流程(如“对决”模式)、分层决策(安全/大胆/疯狂),以及针对现有设计系统的自适应能力。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ChaseSunstrom/sampo/tree/HEAD/plugin/skills/directions

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Sampo:风格方向

一句产品简介输入,六个独特风格方向输出,每个方向一张卡片,一屏可览;其中一个被选中并保存为 DESIGN.md,附带大胆程度。在 Claude Code 或 Smith (sampo smith) 会话中以 /sampo:directions <句子> 命令启动,或在用户询问 UI 界面“外观”或“风格”时自行启动。本技能适用于 Web 和 App 界面;终端 UI 或 Claude Code 模组应改用 playbooks 的 terminal-ui.md。

它将 UI playbook ../playbooks/references/ui/design-direction.md 从单一方向扩展为六个可选方向:该文件包含品味词汇、方向库、大胆度旋钮、“要避免的默认项”以及 DESIGN.md 模板。在起草前,请先阅读该文件,然后阅读 references/cards.md(卡片格式、卡片集合规则、通用默认项、预览页面配方及一个完整示例)。

方向来自三个“货架”:playbook 的 120 行方向库;20 种外观(sampo lib list --area looks,然后 sampo lib show look-NAME:已测量的调色板、排版、布局、动效及对比度测试);以及着色器外观(sampo lib show shader-NAME),作为可选纹理应用于一个表面,但从不作为方向本身。

用户的品味决定了外观的排序:sampo looks 根据用户保留、回退、表示“不是这样”或在校准中选择的偏好,对这 20 种外观进行排序。你应提供的方向从其顶部选取,除非用户明确指定,否则绝不选择低于 0 分的外观;如果没有外观得分达到 0 或以上,则选择最不消极的那个,并说明哪个卡片排名的投票数最高;尚无信号时,所有外观均为 0 分。不会自动检测保留或回退的外观:当用户保留或回退一个外观时,请自行运行 sampo looks keep 或 sampo looks revert(步骤 5 中会说明时机)。

流程

  1. 简要说明与现有方向。 保存 DESIGN.md 是一个编辑操作,因此请在一个专注的任务中工作;如果没有任务,运行 sampo task new "Style direction for <product>" --type FEATURE --tier S --ac "DESIGN.md names a direction, a runner-up and an audacity :: grep -qE 'audacity (safe|bold|wild)' DESIGN.md" --focus。如果仓库已经有一个方向(包含 ## Direction 部分的 DESIGN.md、品牌指南或已发布的设计系统),则它获胜(playbook 的步骤 1):命名该方向并停止,除非用户要求新的外观。此时,需针对该现有方向进行设计(即使该方向不再被提供)并替换文件;git 会保留旧版本,新的 Direction 部分需说明它替换了哪个方向。一个 token 文件,或由 sampo design extract 写入且仅包含 Tokens 部分的 DESIGN.md,被视为一个调色板,而非方向:按常规起草,每张卡片需说明是否保留该调色板。
  2. 阅读句子。 从句子中提取产品、受众和任何品味词汇(参考 playbook 的表格;空白词汇不设置旋钮)。从句子中回答面试问题 1(用户是谁,以及他们一分钟前在做什么)和问题 3(它绝对不能与什么混淆);如果句子中未提供,则从仓库(README、现有文案)中读取,并标记为 假设。不要问问题 2:六张卡片本身就是答案,每张卡片对应一个物理事物。如果句子完全没有指明产品(例如“让它漂亮一点”),则向用户提一个问题,询问它是什么以及为谁而做;在全自主模式下,从 README 中读取这些信息。
  3. 起草六张卡片,遵循 references/cards.md 的格式,然后检查整个集合是否符合以下规则:
    • 至少四张来自方向库或外观库,最多两张为 own;
    • 多样性:暗色背景与中等或淡色背景,三种类型类别,一张稀疏卡片和一张密集卡片,一张静态卡片和一张动态卡片,每种大胆度设置(safe、bold、wild)至少出现一次;
    • 任意两张卡片在至少三个旋钮上不同,且绝不能共享一个物理事物或一个标志性动效;
    • 每张卡片的正文字体对需达到 4.5:1 或更高的对比度(外观的调色板已测量;否则使用 sampo lib show look-lido --section "Test first" 中的脚本),其强调色与状态色相相差 30° 或以上;
    • 没有一张是 cards.md 中的通用默认项,没有一张违反“要避免的默认项”,且没有一张外观其 Not for: 字段指定了此类产品。 对不合格的卡片进行重写,每个位置最多两次,然后从方向库或外观库中选取另一张填入该位置;每张被丢弃的卡片保留一行说明原因。
  4. 展示它们。 一次性展示全部六张卡片,然后显示对比表格(每行:背景、类型、密度、动效、圆角、大胆度),以体现多样性,同时列出被丢弃的卡片、你的推荐方案和次选方案,并附上各自的原因。推荐方案应使用 playbook 为该表面设置的默认大胆度(设置界面、管理界面和表单使用 safe;产品主页使用 bold;游戏、作品集和活动使用 wild),除非用户的词汇改变了它。仅当用户要求(“展示给我看”、“把它们做成样稿”)或用户在两个方案之间犹豫不决时,才生成预览页面:使用 cards.md 中的配方,在仓库外部生成,然后对它们运行 sampo design lint。 当用户犹豫不决或所有卡片看起来都相似时,先分歧再收敛: 进行一轮三变体发散(sampo design diverge 3 <the screen> --out DIR: 在差距较大的方向中创建概念简介,每个方向独立构建,获胜者用 sampo design diverge pick LOOK 保留);味觉对决或用户回答的四轮锦标赛(/sampo:looks tournament);相反日(sampo looks opposite LOOK,与当前外观最远的方向);外观集页面(sampo looks book --out FILE);或同一布局的五种历史风格(references/idioms.md)。
  5. 选择。
    • 标准自主模式:一个 AskUserQuestion,包含两个问题。“选择哪个方向?”:四个选项,你的推荐排第一,其次是接下来的三个;其自由文本回答可以接受 1 到 6 之间的任何数字,或两个方向的混合(一个拥有类型,另一个拥有颜色;绝不能是三个)。“大胆程度如何?”:所选卡片的大胆度排第一,其次是其他两个设置。被选中的外观需记录到分类账:sampo looks keep look-NAME。用户拒绝的外观(“不是这样”):sampo looks not look-NAME --why '<他们的说法>'(说法中不含引号字符;否则省略 --why),然后重新起草该位置。后续被替换或回退的已保存外观:sampo looks revert look-NAME。被拒绝的 AskUserQuestion 不记录任何内容。
    • 全自主模式(sampo autonomy 返回 full):无需提问。采用你的推荐方案及其大胆度,并记录:sampo decide "Style direction: <名称>, audacity <设置>" --task <ID> --why "<为什么适合该句子>" --rejected "<其他五个,每个附理由>"。在最终报告中指定所选方案和次选方案,以便用户可以用一个词切换。sampo looks 不记录任何内容:它只保留用户的选择。
  6. 保存 DESIGN.md 到仓库根目录(或现有设计系统包旁边),按照 playbook 的 DESIGN.md 模板填写所有标题,顺序为:Point of view、Interview、Direction、Knobs、Signature moves、Banned、Allowed exceptions。如果存在现有的 Tokens 部分,则保持不变(在 token 文件跟随选择创建后,重新运行 sampo design extract <ui 根目录> 即可);如果没有 Tokens 部分,则等待 token 文件生成后,由 sampo design extract 写入。
    • Point of view 和 Interview 来自步骤 2;“Feels like”即是所选卡片的物理事物,若由用户选择则标记为 user,若在全自主模式下则为 assumed。
    • Direction: <方向库行、look-NAME 或 "own: NAME">, audacity <safe | bold | wild>.,然后列出次选方案及其落选原因,最后是品味词汇的分配。若为混合方案,则列出双方及其所属领域:Gallery (type) + Negative file (colour), audacity bold.
    • Knobs: 将卡片扩展为模板的详细格式;每种颜色及其角色,以及每个文本对与背景对的测量对比度。
    • Signature moves: 根据大胆度行数允许的数量(safe 1,bold 2,wild 3),卡片自带的排第一。若外观要求使用声音,则从 references/sonic.md 中获取(默认关闭,绝不能是唯一的信号)。
    • Banned: 反参考、该集合最接近的通用默认项,以及每条适用的“要避免的默认项”。 检查 DESIGN.md,并将检查结果作为该步骤的证据记录(sampo task evidence <ID> --step N --run "<cmd>"): grep -cE '^## (Point of view|Interview|Direction|Knobs|Signature moves|Banned|Allowed exceptions)$' DESIGN.md 应输出 7,且 grep -E 'audacity (safe|bold|wild)' DESIGN.md 应找到 Direction 行。
  7. 交接。 构建阶段遵循 playbook 的步骤 7:先构建,然后执行其检查(包括封面测试)。预览页面保留在仓库外部。通过 Smith 循环关闭任务,或者如果此外观只是一个更大任务中的一个步骤,则继续执行。

第二次运行会找到第一次保存的 DESIGN.md,并在步骤 1 处停止,除非用户要求新的外观。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相关技能