真实操作案例设计与视觉创意
设计品牌视觉规范：Tokeny 实操案例
为虚构品牌生成视觉规范：主辅色、文字对比度、字体层级、留白、按钮和图标规范。输出 HTML 指南和设计 token JSON。
作者：Tokeny 团队 · Windows · Tokeny 1.7.8 · gpt-6-sol
准备这次任务的输入
在 Tokeny 中新建工作空间，将下载的样例解压到工作空间，选择支持工具调用的模型。本例使用合成演示数据或文中列出的公开资料。
- product-brief.md
把任务交给 Tokeny
为虚构品牌生成视觉规范：主辅色、文字对比度、字体层级、留白、按钮和图标规范。输出 HTML 指南和设计 token JSON。 交付文件：brand-guide.html、tokens.json。 验收要点： - 含色值和用途 - 文字对比度经过计算 - 覆盖按钮正常和焦点状态 这是使用合成演示输入或指定公开资料的真实操作案例。请先读取工作空间输入，再实际生成文件并自检。所有写入、脚本与临时服务限于当前工作空间；临时服务只监听 127.0.0.1，执行后关闭；不触达外部收件人、不发布、不付款、不更改系统设置，不调用子智能体。需要公开资料时可读取给定 URL。只启用完成任务必需的工具。另写 report.md（中文）和 report.en.md（英文），简洁、完整，包含输入、处理步骤、真实结果、检查方式和局限；失败或未验证部分如实记录，不能宣称成功。最终回复用中文列出产物、关键结果与待核实项。
本次使用独立演示工作空间。复现时，请根据自己的文件与权限设置检查操作，确认后继续。
实际执行过程
任务从 Tokeny 输入框提交，由在线模型读取资料并调用工具实际执行。本例核对本地演示任务与实际生成的文件，结果和检查方法见下文。
产物、结果与复核
输入
product-brief.md：虚构产品“松果任务板”，面向 3–10 人小团队，功能为任务列表、负责人、截止日期、CSV 导出。- 已指定品牌色：
#176B52。 - 约束：不编造客户评价、销量或第三方背书；仅在当前工作空间写入文件。
处理步骤
- 读取
product-brief.md、ENVIRONMENT.md和工作空间 manifest。 - 以
#176B52为主色，补充琥珀强调色、深色文字、高亮背景和边框色。 - 为正文、按钮正常/悬停/按下/焦点/禁用状态定义 token，并加入字体层级、4px 间距系统和图标规则。
- 以 WCAG 相对亮度算法计算文字与背景对比度，结果写入
tokens.json和 HTML 表格。
真实结果
已生成：
brand-guide.html：中文视觉指南，含色值与用途、对比度实测表、字体、留白、按钮状态和图标规范。tokens.json：结构化品牌 token，含颜色、排版、间距、按钮状态、图标和对比度结果。report.md、report.en.md：本次实测报告。
检查方式
- 解析
tokens.json，确认 JSON 合法且包含品牌、颜色、对比度、字体、间距、按钮和图标字段。 - 用同一套 WCAG 相对亮度公式重新计算所有对比度，并与 token 中记录值比较。
- 检查 HTML 包含
lang="zh-CN"、色值、对比度表、:focus-visible焦点样式及按钮状态示例。 - 检查四个交付文件均存在且非空。
局限
- 未在真实浏览器中执行视觉回归或辅助技术测试；本次只做静态内容和公式自检。
- 对比度计算针对声明的前景/背景纯色；实际产品中的半透明层、图片背景和系统字体渲染仍需在实现环境复核。
下载产物，自己核对
压缩包保存本次执行生成的文件。替换成自己的资料后，可以按下面的检查点验收。
- 含色值和用途
- 文字对比度经过计算
- 覆盖按钮正常和焦点状态
brand-guide.html · 9 KBtokens.json · 3 KBreport.md · 2 KBreport.en.md · 2 KB
下载本次实际产物