AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载本文围绕 OpenDesign 仓库中 Storytelling 设计系统包 的 Usage 契约展开讲解该包在 agent 与 reviewer 工作流中的正确打开方式阅读顺序、设计基调、token 命名纪律、组件复用边界与反模式约束。读完本文你将掌握如何把tokens.css作为唯一事实源接入生成物、如何依据components.manifest.json快速定位组件与状态、以及如何用source/审计证据核验包的 provenance避免在跨品牌切换与手工改 token 时踩坑。Storytelling 包在仓库中的定位design-systems/storytelling/是 OpenDesign 仓库design-systems/目录下的一个可移植设计系统包portable design-system package。按照 design-systems/README.md 的说明每个子目录都是一个自包含的设计系统包用户在设计系统面板或项目创建工作流中选中它时OpenDesign 会把这个包的设计上下文组合进 agent 的 prompt 中从而让生成界面时自动带上该风格的视觉约束。该包的 manifest.json 声明了完整的机器可读元数据{ schemaVersion: od-design-system-project/v1, id: storytelling, name: Storytelling, category: Creative Artistic, description: Bundled OpenDesign package for Storytelling, derived from curated DESIGN.md, tokens.css, and components.html fixtures., source: { type: bundled, origin: OpenDesign curated bundled fixture }, files: { design: DESIGN.md, tokens: tokens.css, designTokens: design-tokens.json, tailwind: tailwind-v4.css, components: components.html }, usage: USAGE.md, componentsManifest: components.manifest.json, importMode: normalized, craft: { applies: [], suggested: [color, accessibility-baseline] }, preview: { dir: preview, pages: [ { path: preview/colors.html, role: colors, title: Colors }, { path: preview/typography.html, role: typography, title: Typography }, { path: preview/spacing.html, role: spacing, title: Spacing } ] }, sourceFiles: { evidence: source/evidence.md, tokens: source/tokens.source.json, report: source/token-contract.report.json } }几个值得注意的字段category: Creative Artistic——该包按创意/艺术类目收录source.type: bundled——该包来自 OpenDesign 官方整理的 bundled fixture而非对上游品牌仓库的实时抓取详见下文证据边界importMode: normalized——以规范化模式导入craft.suggested指向color与accessibility-baseline两条 craft 规范意味着生成时应主动参考仓库中的 craft/color.md 与 craft/accessibility-baseline.mdpreview与sourceFiles声明了可视化预览页与审计证据文件均通过包/静态文件 API 暴露不扩大文件系统访问边界。包内完整文件清单如下相对仓库根USAGE.md——本指南agent 与 reviewer 的契约入口DESIGN.md——视觉意图、约束与反模式tokens.css——规范化语义 token 样式表唯一事实源design-tokens.json 与 tailwind-v4.css——派生产物components.html 与 components.manifest.json——组件夹具与派生索引system/——系统资产页index.html、kit.html、kit.dark.html、tokens.default.jsonpreview/——colors / typography / spacing 三张预览页source/——evidence.md、token-contract.report.json、tokens.source.json 审计证据。推荐阅读顺序Read OrderUSAGE.md 明确给出了五步阅读契约建议 agent 与 reviewer 按此顺序消费该包先读本文件USAGE.md理解包契约与使用纪律再读 DESIGN.md掌握视觉意图、约束与反模式把tokens.css粘贴到第一个产物的style块中再开始编写组件 CSS——这是保证 token 一致性的关键动作需要组件清单时使用components.manifest.json紧凑索引需要精确选择器或状态细节时打开components.html需要视觉 sanity check 时检查preview/页面colors、typography、spacing。这套顺序的本质是先立契约、再贴 token、后查组件、最后看预览避免 agent 在未加载 token 的情况下自行发明样式值。设计基调与颜色立场DESIGN.md 对该包的设计意图做了完整描述类别Creative Artistic视觉风格visual styleplayful俏皮、叙事驱动颜色立场color stanceprimary、neutral、success、warning、danger 五类齐备设计意图让产出在该风格家族内保持可辨识同时不牺牲可用性与可读性Primary 色#3B82F6来自风格基础 token。颜色对照源自 DESIGN.md 第 2 节角色色值说明Primary#3B82F6风格基础 token用于 CTA 强调Secondary#8B5CF6风格基础 tokenSuccess#16A34A风格基础 tokenWarning#D97706风格基础 tokenDanger#DC2626风格基础 tokenSurface#FFFFFF大背景与卡片Text#111827正文保证可读性Neutral#FFFFFF由 surface token 派生兼容官方格式排版基调desktop-first expressive scale字体族 primaryInter、displayAbril Fatface、monoJetBrains Mono字重覆盖 100–900 全档。间距刻度为 4/8/12/16/24/32网格与垂直节奏保持一致。注意DESIGN.md 中的#3B82F6等值是风格族层面的基础色而包内实际生效的tokens.css已按 Storytelling 风格实例化了温暖纸色系的语义 token如--bg: #fbf6ee、--accent: #9b5b32。两者并不冲突——前者是风格家族的 identity 描述后者是该包落地的具体绑定。生成产物时应始终以tokens.css为准。tokens.css唯一事实源与语义 token 全解USAGE.md 的纪律核心是schema token 名称必须原样保留以保证跨品牌切换可靠。这意味着生成时不要改名、不要重定义、不要绕过 token 直接写裸 hex。tokens.css 共声明 56 个 token按设计令牌分层可划分为A1-identity身份层8 个--bg、--surface、--fg、--muted、--border、--accent、--font-display、--font-body定义品牌辨识度A1-structure结构层18 个字号刻度--text-xs(12px) 到--text-4xl(88px)、行高--leading-body(1.62)、字距--tracking-display、区块纵向留白--section-y-desktop/tablet/phone、容器--container-max(1180px) 与三档 gutterA2派生层26 个状态色--accent-on/hover/active、--success/warn/danger、间距--space-1(4px) 至--space-12(48px)、圆角--radius-sm/md/lg/pill、投影--elev-flat/ring/raised、焦点环--focus-ring、动效时长--motion-fast/base、缓动--ease-standard、字体--font-monoB-slot槽位层4 个--surface-warm、--fg-2、--meta、--border-soft。核心颜色与交互 token 节选完整见 tokens.css:root { --bg: #fbf6ee; --surface: #fffdf8; --surface-warm: #f1e3cf; --fg: #201914; --fg-2: #4c4037; --muted: #7a6d63; --meta: #9b5b32; --border: #ded2c3; --border-soft: #eee4d7; --accent: #9b5b32; --accent-on: #ffffff; --accent-hover: color-mix(in oklab, var(--accent), black 8%); --accent-active: color-mix(in oklab, var(--accent), black 14%); --success: #4f8a4f; --warn: #c9822f; --danger: #b33a3a; --font-display: Georgia, Times New Roman, serif; --font-body: Inter, system-ui, sans-serif; --font-mono: SF Mono, ui-monospace, Menlo, monospace; }几个实现细节值得展开--accent-hover与--accent-active使用 CSS 原生color-mix(in oklab, ...)从--accent派生hover 加深 8%、active 加深 14%——这样 hover/active 状态永远与主色同步不需要手工维护第二组色值字号刻度从 12px 一直到 88px配合--leading-body: 1.62与--leading-tight: 1支撑标题有性格、正文可扫读的叙事排版焦点环--focus-ring: 0 0 0 4px rgba(155, 91, 50, 0.24)复用 accent 色相保证键盘可达性状态与品牌一致。派生产物与 token 契约USAGE.md 与 source/evidence.md 明确说明design-tokens.json与tailwind-v4.css是派生产物应依据 token-contract report 与 tokens.css 重新生成不应手工编辑。design-tokens.json 汇总了 56 个 token 的分层统计A1-identity 8 个、B-slot 4 个、A2 26 个、A1-structure 18 个契约评分score: 100、grade: excellent、recommendRebuild: false且每个 token 都带sources指向 tokens.css 的具体声明行如tokens.css:7对应--bgtailwind-v4.css 通过theme块把全部语义 token 映射为 Tailwind v4 主题变量--color-accent、--spacing-4、--radius-md、--shadow-raised、--duration-fast、--ease-standard等头部注释明确写着Derived from tokens.css. Keep tokens.css as the source of truth.——再次印证 token 单一事实源原则。Do生成时应遵守的纪律USAGE.md 列出四条正向要求原样保留 schema token 名称确保跨品牌切换cross-brand switching稳定可靠——这是整个包契约的根基使用--accent承担主操作、链接、焦点状态并保持页面中只有一个清晰的焦点元素one clear focal element优先复用components.manifest.json中的组件组不要急着发明新控件把source/文件当作 bundled fixture backfill 的审计证据——即证据文件用于核对包的来源与契约而不是当作新的设计输入。从 components.manifest.json 可以看到包内已索引的组件组与 token 引用生成时可直接复用组件组选择器/类引用的核心 tokenButtons and calls to action.btn、.btn-primary、.btn-secondary、:hover、:focus-visible--accent、--accent-on、--radius-md、--motion-fast、--ease-standardForm fields and controls.field、input、input:focus、label--border、--radius-sm、--space-2/4/5、--surfaceCards and panels.card-row、.panel、.panel-head、.tile--border、--elev-raised、--radius-lg、--surfaceBadges, chips, and status labels.status、.status::before--success、--radius-pill、--metaTypography scale and text utilities.eyebrow、.lead、h1/h2/h3--fg-2、--text-4xl/xl/lgLayout primitives.container、section、.metric-grid--container-gutter-*、--section-y-desktop该清单同时给出了未用 token--accent-active、--danger、--elev-flat、--motion-base、--space-1、--space-12、--warn与未声明引用undeclaredReferenced: []可用于评估组件夹具的健康度。Avoid必须避开的反模式USAGE.md 的四条 Avoid 同样关键不要在被粘贴的:roottoken 块之外使用裸 hex 色值——颜色必须走 token不要脱离tokens.css单独重定义 Tailwind 或设计 token 值——Tailwind 映射tailwind-v4.css是派生产物以 tokens.css 为准不要声称存在原始上游来源证据——该包基于 curated bundled fixture 整理manifest 中source.origin亦如此声明source/evidence.md 明确写着它不声称对上游品牌仓库或官网做过 fresh crawl不要添加components.html或DESIGN.md中未体现的新组件配方——组件面与设计面必须与已收录内容对齐。DESIGN.md 第 9 节还补充了四条反模式不引入调色板之外的色值能用一个既有 token 解决就别新增、不用同一字号/字重抹平层级、不加损害可读性与可达性的装饰效果、不在同一界面混用无关视觉隐喻。证据边界bundled fixture 与 source/ 审计USAGE.md 特别强调不要声称原始上游来源证据。这一点在包内证据链中得到了完整印证source/evidence.md 声明本 backfill 源自 OpenDesign curated bundled fixture包含DESIGN.md、tokens.css、components.html三份夹具不做对上游原始品牌仓库或网站的 fresh crawlsource/token-contract.report.json 以TOKEN_SCHEMA契约为准把每个 token 绑定回tokens.css的声明行sources字段如tokens.css:7每个 token 的confidence均为highdesign-tokens.json 与source/tokens.source.json进一步归档了分层统计与原始 token 数据。因此在 agent 与 reviewer 的对话中引用该包时应使用基于 OpenDesign bundled fixture 的 Storytelling 设计系统包这类准确措辞而非声称引用了某个上游品牌的官方设计资产。视觉校验入口当需要快速核对风格是否走样时包内提供了两条校验路径preview 页面打开 preview/colors.html颜色、preview/typography.html排版、preview/spacing.html间距做视觉 sanity checksystem 资产页system/index.html 与 system/kit.html含 dark 变体 kit.dark.html展示系统化资产components.html 则直接呈现了参考组件hero 叙事区块、.btn-primary/.btn-secondary按钮、.panel面板、.status状态徽标、.metric-grid指标网格、.mini-card迷你卡片与.field表单控件并配有input:focus的--focus-ring焦点环样式。与仓库整体工作流的衔接在 OpenDesign 的产品语义中Storytelling 包与其他设计系统包共用同一套最小结构manifest.jsonDESIGN.mdtokens.css并额外启用了 USAGE.md、components 夹具、design-tokens、tailwind 映射、preview 与 source 等 rich 文件。prompt 组合prompt composition会消费USAGE.md、tokens.css、组件信息、import mode、craft 绑定与 manifest 派生的拉取索引包质量守卫package-quality guards会校验声明路径、rich profile、派生文件一致性、token 契约、组件夹具、source 证据与 preview 覆盖度详见 design-systems/README.md。这意味着当你以 Storytelling 包为背景生成界面时最终输出应当严格落在56 个语义 token 已收录组件组 温暖纸色叙事风格的范围内——这正是 USAGE.md 契约的最终目的。赞分享AI 应用人工智能AI 技能设计系统媒体生成【免费下载链接】open-design Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. ️ Local-first desktop app. ️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images video — real files, HTML/PDF/PPTX/MP4 export. Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode 20 CLIs via BYOK.项目地址https://gitcode.com/gh_mirrors/opend/open-design点击查看免费下载相关推荐OpenDesign Dashboard 设计系统包实战指南从契约读取到 Token 落地OpenDesign Dashboard 设计系统包实战指南从契约读取到 Token 落地 本指南以 OpenDesign 仓库中 design systemAI 应用人工智能AI 技能设计系统媒体生成OpenDesign WeChat 设计系统包实战指南从 USAGE 契约到 tokens.css 落地OpenDesign WeChat 设计系统包实战指南从 USAGE 契约到 tokens.css 落地 导读 本文是 OpenDesign 仓库中 WeChAI 应用人工智能AI 技能设计系统媒体生成OpenDesign Canva 设计系统包实战指南从 USAGE 契约到 tokens.css 落地OpenDesign Canva 设计系统包实战指南从 USAGE 契约到 tokens.css 落地 本指南面向在 OpenDesign 中生成、审查与复用AI 应用人工智能AI 技能设计系统媒体生成上一篇突破卡顿Jellyfin硬件转码全攻略让你的GPU为媒体服务器加速下一篇FanControl Windows 风扇控制完整指南从零搭一条属于你的静音曲线创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考