Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add dhslegen/digital-delivery-team --skill ai-native-designgit clone --depth 1 https://github.com/dhslegen/digital-delivery-teamWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/dhslegen/digital-delivery-team/ai-native-design)<a href="https://agentmods.dev/skills/dhslegen/digital-delivery-team/ai-native-design"><img src="https://agentmods.dev/badge/skills/dhslegen/digital-delivery-team/ai-native-design/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/dhslegen/digital-delivery-team/ai-native-design"><img src="https://agentmods.dev/badge/skills/dhslegen/digital-delivery-team/ai-native-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00105 | $0.06753 |
| Opus 5 | $0.00053 | $0.03377 |
| Sonnet 5 | $0.00021 | $0.01351 |
| Haiku 4.5 | $0.00011 | $0.00675 |
Grade A, and why
ai-native-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 535 lines — stays where its author put it; the contents beside it link to each section on GitHub.
AI-Native Design · v0.8
v0.8 起 DDT 把"前端 UI 实现"重新定位为 "PRD / 契约 → 结构化 Brief"的编译器 + "3 通道分发器"。 Brief 是 SSoT（single source of truth），3 个通道都从它派生定制化 prompt + 附件包。
Triggers
/design-brief命令的所有 phase（编译 brief / 决策门 / 提示用户）/design-execute --channel <X>的派发分支（生成附件包并引导用户）/design-execute --bundle <zip>/--url <share>的摄取分支（main thread 读 ingest-report 改写 web/）/build-webIMPLEMENT phase 收尾（验证契约对齐 + 跑构建测试）
Core Principles
- Brief 是 SSoT：用户审核一份 Brief，3 个通道派生不同 prompt + 附件包；不要让用户分别为各通道写 3 份不同输入。
- 契约一等公民：所有通道的 prompt 都强制注入
docs/api-contract.yaml；所有通道生成的代码必须经web/lib/api-client.ts，禁止 mock 数据漂移。 - stack-aware 通道选择：用户
frontend.type === 'spa'才走本 skill；server-side/none由/build-api处理（PR-E）。 - 强观点设计方向：brief §8.1 强制
visual_direction9 选 1（不允许混搭）；通道 prompt 注入此选择，禁止通道擅自换风格。 - 反 AI-slop 黑名单：brief §8.3 的 11 条 anti-patterns 在所有通道 prompt 逐字注入，禁止通道自由发挥。
- 摄取脚本只做 staging：
bin/ingest-*.mjs把外部源拉到.ddt/design/<channel>/raw/，不直接改 web/；main thread 读ingest-report.json后按本 skill 改写。
三通道总览
| 通道 | 适用 | 输入 | 输出 |
|---|---|---|---|
| claude-design（首选默认） | 用户已订阅 Claude；多文件项目；零外部账号 | .ddt/design/claude-design/upload-package/（7 文件附件包） + prompt.md |
bundle zip 或 Handoff to Claude Code → DDT 摄取 |
| figma | 团队已有 Figma 设计师 / Figma MCP 已部署 | .ddt/design/figma/upload-package/（7 文件） + TC-EBC prompt.md |
Figma file URL → MCP get_design_context |
| v0 | Next.js + Vercel 项目；视觉质量优先 | .ddt/design/v0/v0-sources/ + Project Instructions + 每屏 prompt |
v0 share URL → npx shadcn add |
不支持：Lovable（v0.8 决定不支持，强 Supabase 集成与 DDT 后端契约冲突）。
通道 A · claude-design（首选默认）
产品定位
claude.ai/design 是 Anthropic 2026-04-17 推出的独立产品，与 Claude Code、Claude Artifacts 完全不同：
| 维度 | claude.ai/design | claude.ai chat Artifacts | Claude Code |
|---|---|---|---|
| 形态 | 独立 SPA 多文件项目 | 单文件 inline 预览 | CLI 本地 IDE Agent |
| 输出 | JSX < 1000 行 / 文件 + tokens.css 标准 CSS variables | 单文件 React/HTML | 直接修改 repo |
| DDT 集成 | 首选默认通道 | 不作通道使用 | 已是 DDT 运行时 |
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 10d ago First seen · 535 lines · 105 tokens per session scan A bd5598034092
ai-native-design is a skill published in the GitHub repository dhslegen/digital-delivery-team (1 stars, last pushed 3mo ago), licensed MIT. It adds 105 tokens to every session and 6,753 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
design-system-reference
Style guides and implementation rules for frontend design. Works with design-discovery agent which handles context gathering and VS-based style recommendations. Contains detailed style guides, anti-patterns, and implementation checklists.
scroll-craft
Build premium scroll-driven landing pages for service, product, food, and drink brands. Plan the visitor journey, page grammar, emotional peak, and bespoke signature move. Create dimensional heroes with independent visual planes, restrained motion, and separate mobile composition. Use supplied photos and footage or…
interface-craft
Raises the visual and interaction quality of an interface — layout, hierarchy, type, spacing, density, and the details that separate a considered product from a generic one. Use this when a screen works but looks unfinished or default, when a layout feels crowded or arbitrary, when a page has no clear focal point, or…
design-system
Builds and maintains the design system a product is assembled from — tokens for color, type, spacing and elevation, component contracts, and the rules that keep them coherent as the product grows. Use this when starting a new interface, when screens have drifted apart visually, when the same component exists three…
interface-redesign
Upgrades an existing interface to a higher standard without rebuilding it — auditing what is there, identifying what reads as generic or unfinished, and sequencing changes by impact. Use this when a product works but looks dated or default, when a redesign is being considered, when deciding whether to restyle or…
frontend-patterns
Context enrichment for frontend UI development using shadcn/ui and Tailwind CSS. Use when building component libraries, implementing UI designs, theming, or working with accessible React components.