/g The Contract Codex ← 返回动态 Catalog

Design System Context Export

Extract design tokens, components, and visual patterns into agent-readable context so generated UI follows the product design system.

难度:intermediate 分类:design 来源:Layout design system docs

完整 Prompt(可直接复制)

/goal
GOAL:
Complete Design System Context Export for a product UI codebase: Extract design tokens, components, and visual patterns into agent-readable context so generated UI follows the product design system.

CONTEXT:
- Before editing, read the nearest AGENTS.md/CLAUDE.md, current issue or PLAN.md, and any failing logs already in the repo.
- Inspect design tokens, component variants, layouts, visual states, and screenshots.
- Establish a baseline by running or locating evidence for: `layout.md and token export reviewed, component variant preview checked, and design-system health score or screenshot evidence captured`.

CONSTRAINTS:
- Keep the scope limited to this goal; do not expand into unrelated cleanup.
- Do not weaken tests, delete assertions, or mask errors to make verification pass.
- Respect the repository's AGENTS.md/CLAUDE.md instructions and existing patterns.
- Do not replace the app with a landing-page style redesign.
- Preserve domain workflows and use existing design tokens where they exist.

DONE WHEN:
- The implementation or documentation directly satisfies: Extract design tokens, components, and visual patterns into agent-readable context so generated UI follows the product design system.
- The verification command or evidence path succeeds: `layout.md and token export reviewed, component variant preview checked, and design-system health score or screenshot evidence captured`.
- The final diff is scoped to the relevant files and has no unrelated formatting churn.

VERIFY:
- Run `layout.md and token export reviewed, component variant preview checked, and design-system health score or screenshot evidence captured` or the closest repo-local equivalent if the exact command is not available.
- Capture before/after evidence for the behavior, metric, report, or artifact involved.
- If verification cannot run locally, stop and report the missing dependency instead of guessing success.

OUTPUT:
- Summarize changed files, key decisions, verification output, and remaining risks.
- Include any follow-up that is required for production rollout or human review.

STOP RULES:
- Pause if secrets, production access, stakeholder decisions, or destructive data operations are required.
- Pause after three failed fix attempts on the same symptom and challenge the root-cause hypothesis.
- Do not mark the goal complete until the current repository state has been audited against DONE WHEN.

来源与证据

原始来源: Layout design system docs

证据摘要: Pull design tokens, components, fonts, and screenshots from Figma files or live websites; source: Layout design system docs; type: third-party-project; verification: layout.md and token export reviewed, component variant preview checked, and design-system health score or screenshot evidence captured