@design-ai/cli 4.55.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude-plugin/plugin.json +164 -0
- package/AGENTS.ko.md +126 -0
- package/AGENTS.md +182 -0
- package/CHANGELOG.md +6883 -0
- package/CLAUDE.md +39 -0
- package/LICENSE +21 -0
- package/README.ko.md +245 -0
- package/README.md +277 -0
- package/agents/README.md +14 -0
- package/agents/a11y-reviewer.md +121 -0
- package/agents/component-architect.md +57 -0
- package/agents/design-critic.md +46 -0
- package/agents/token-extractor.md +63 -0
- package/cli/bin/design-ai-mcp.mjs +6 -0
- package/cli/bin/design-ai.mjs +40 -0
- package/cli/commands/audit.mjs +111 -0
- package/cli/commands/check.mjs +226 -0
- package/cli/commands/doctor.mjs +141 -0
- package/cli/commands/examples.mjs +58 -0
- package/cli/commands/help.mjs +271 -0
- package/cli/commands/install.mjs +161 -0
- package/cli/commands/learn.mjs +1871 -0
- package/cli/commands/list.mjs +143 -0
- package/cli/commands/mcp.mjs +27 -0
- package/cli/commands/pack.mjs +211 -0
- package/cli/commands/prompt.mjs +199 -0
- package/cli/commands/route.mjs +247 -0
- package/cli/commands/search.mjs +60 -0
- package/cli/commands/show.mjs +52 -0
- package/cli/commands/site.mjs +558 -0
- package/cli/commands/status.mjs +161 -0
- package/cli/commands/uninstall.mjs +119 -0
- package/cli/commands/update.mjs +184 -0
- package/cli/commands/version.mjs +94 -0
- package/cli/commands/workspace.mjs +176 -0
- package/cli/lib/brief.mjs +52 -0
- package/cli/lib/check.mjs +642 -0
- package/cli/lib/dispatch.mjs +109 -0
- package/cli/lib/doctor.mjs +505 -0
- package/cli/lib/examples.mjs +258 -0
- package/cli/lib/exec.mjs +63 -0
- package/cli/lib/help-flags.mjs +5 -0
- package/cli/lib/learn.mjs +3694 -0
- package/cli/lib/log.mjs +47 -0
- package/cli/lib/mcp-server.mjs +426 -0
- package/cli/lib/output.mjs +101 -0
- package/cli/lib/pack.mjs +599 -0
- package/cli/lib/paths.mjs +63 -0
- package/cli/lib/prompt.mjs +603 -0
- package/cli/lib/route.mjs +740 -0
- package/cli/lib/search.mjs +158 -0
- package/cli/lib/show.mjs +161 -0
- package/cli/lib/signals.mjs +2337 -0
- package/cli/lib/site.mjs +6617 -0
- package/cli/lib/skill-proposals.mjs +2046 -0
- package/cli/lib/suggest.mjs +66 -0
- package/cli/lib/workspace.mjs +1056 -0
- package/commands/README.md +25 -0
- package/commands/component-spec.md +34 -0
- package/commands/conversational.md +44 -0
- package/commands/design-from-brief.md +141 -0
- package/commands/design-review.md +62 -0
- package/commands/document-from-brief.md +47 -0
- package/commands/extract-tokens.md +38 -0
- package/commands/game-ui.md +40 -0
- package/commands/illustration.md +37 -0
- package/commands/iterate.md +167 -0
- package/commands/motion-design.md +54 -0
- package/commands/palette-from-brand.md +50 -0
- package/commands/print.md +49 -0
- package/commands/slide-deck.md +46 -0
- package/commands/spatial.md +47 -0
- package/commands/stability-review.md +74 -0
- package/commands/video.md +42 -0
- package/commands/website-improvement.md +77 -0
- package/docs/AGENT-DEVELOPMENT.md +658 -0
- package/docs/AI-LEARNING.md +429 -0
- package/docs/AIDER-INTEGRATION.md +224 -0
- package/docs/ARCHITECTURE.ko.md +183 -0
- package/docs/ARCHITECTURE.md +105 -0
- package/docs/CODEX-INTEGRATION.md +311 -0
- package/docs/COMPANY-WEBSITE-DOGFOOD.ko.md +144 -0
- package/docs/COMPANY-WEBSITE-DOGFOOD.md +150 -0
- package/docs/COMPANY-WEBSITE-INTAKE-TEMPLATE.ko.md +153 -0
- package/docs/COMPANY-WEBSITE-INTAKE-TEMPLATE.md +154 -0
- package/docs/CONTRIBUTING.ko.md +203 -0
- package/docs/CONTRIBUTING.md +242 -0
- package/docs/CURSOR-INTEGRATION.md +220 -0
- package/docs/DISTRIBUTION.ko.md +248 -0
- package/docs/DISTRIBUTION.md +253 -0
- package/docs/DOGFOOD-FINDINGS.md +180 -0
- package/docs/DOGFOOD-V4-FINDINGS.md +139 -0
- package/docs/DOGFOOD-V4-MKDOCS-FINDINGS.md +233 -0
- package/docs/DOGFOOD-V4-NPM-FINDINGS.md +157 -0
- package/docs/DOGFOOD-V4-VSCODE-FINDINGS.md +135 -0
- package/docs/FIGMA-INTEGRATION.md +222 -0
- package/docs/MCP-INTEGRATION.md +243 -0
- package/docs/MIGRATION-v4.md +121 -0
- package/docs/PLUGIN-PACKAGING.md +240 -0
- package/docs/PRODUCT-READINESS.md +66 -0
- package/docs/QUICKSTART.ko.md +178 -0
- package/docs/QUICKSTART.md +179 -0
- package/docs/RELEASE-CHECKLIST.md +292 -0
- package/docs/ROADMAP.md +19495 -0
- package/docs/SESSION-LOG.md +940 -0
- package/docs/TOKEN-SYNC.md +237 -0
- package/docs/USING.ko.md +206 -0
- package/docs/USING.md +218 -0
- package/docs/WEBSITE-IMPROVEMENT.ko.md +75 -0
- package/docs/WEBSITE-IMPROVEMENT.md +89 -0
- package/docs/announcements/README.md +56 -0
- package/docs/announcements/dev-to-korea.md +206 -0
- package/docs/announcements/hashnode-post.ko.md +232 -0
- package/docs/announcements/okky-post.ko.md +158 -0
- package/docs/announcements/press-kit.md +101 -0
- package/docs/announcements/reddit-r-korea.md +196 -0
- package/docs/announcements/show-hn.md +114 -0
- package/docs/announcements/twitter-thread.md +255 -0
- package/docs/external-status.md +34 -0
- package/docs/integrations/aider-walkthrough.ko.md +275 -0
- package/docs/integrations/aider-walkthrough.md +274 -0
- package/docs/integrations/codex-walkthrough.ko.md +297 -0
- package/docs/integrations/codex-walkthrough.md +297 -0
- package/docs/integrations/cursor-walkthrough.ko.md +281 -0
- package/docs/integrations/cursor-walkthrough.md +284 -0
- package/docs/integrations/design-ai-mcp-server.md +169 -0
- package/docs/integrations/figma-mcp.md +149 -0
- package/docs/integrations/github-mcp.md +178 -0
- package/docs/integrations/linear-mcp.md +215 -0
- package/docs/integrations/notion-mcp.md +174 -0
- package/docs/integrations/sdk-walkthrough.ko.md +375 -0
- package/docs/integrations/sdk-walkthrough.md +375 -0
- package/docs/integrations/slack-mcp.md +208 -0
- package/docs/integrations/vscode-walkthrough.ko.md +202 -0
- package/docs/integrations/vscode-walkthrough.md +205 -0
- package/docs/requirements.txt +16 -0
- package/docs/site-overrides/extra.css +83 -0
- package/docs/site-overrides/favicon.svg +4 -0
- package/docs/site-overrides/logo.svg +10 -0
- package/docs/site-overrides/main.html +18 -0
- package/docs/website-console/app.js +2540 -0
- package/docs/website-console/index.html +24 -0
- package/docs/website-console/styles.css +975 -0
- package/examples/README.md +252 -0
- package/examples/cases/dogfood-v4-korean-hr-onboarding.md +356 -0
- package/examples/component-accordion-actions.md +153 -0
- package/examples/component-accordion-details.md +147 -0
- package/examples/component-accordion-summary.md +180 -0
- package/examples/component-accordion.md +229 -0
- package/examples/component-account-card.md +284 -0
- package/examples/component-address-input.md +260 -0
- package/examples/component-affix.md +190 -0
- package/examples/component-alert-dialog.md +210 -0
- package/examples/component-alert-title.md +77 -0
- package/examples/component-alert.md +192 -0
- package/examples/component-amount-input.md +278 -0
- package/examples/component-anchor.md +198 -0
- package/examples/component-app-bar.md +249 -0
- package/examples/component-aspect-ratio.md +156 -0
- package/examples/component-auto-complete.md +199 -0
- package/examples/component-avatar-group.md +170 -0
- package/examples/component-avatar.md +191 -0
- package/examples/component-back-top.md +123 -0
- package/examples/component-backdrop.md +148 -0
- package/examples/component-badge.md +181 -0
- package/examples/component-banner.md +237 -0
- package/examples/component-biometric-gate.md +281 -0
- package/examples/component-blockquote.md +153 -0
- package/examples/component-border-beam.md +207 -0
- package/examples/component-bottom-navigation.md +226 -0
- package/examples/component-box.md +112 -0
- package/examples/component-breadcrumb.md +222 -0
- package/examples/component-button-base.md +190 -0
- package/examples/component-button-group.md +117 -0
- package/examples/component-button.md +213 -0
- package/examples/component-calendar.md +280 -0
- package/examples/component-callout.md +131 -0
- package/examples/component-card-actions.md +101 -0
- package/examples/component-card-content.md +90 -0
- package/examples/component-card-header.md +122 -0
- package/examples/component-card-media.md +79 -0
- package/examples/component-card.md +233 -0
- package/examples/component-carousel.md +266 -0
- package/examples/component-cascader.md +135 -0
- package/examples/component-category-picker.md +271 -0
- package/examples/component-chart.md +237 -0
- package/examples/component-chat-interface.md +399 -0
- package/examples/component-checkbox.md +149 -0
- package/examples/component-click-away-listener.md +87 -0
- package/examples/component-code.md +213 -0
- package/examples/component-collapsible.md +219 -0
- package/examples/component-color-picker.md +110 -0
- package/examples/component-combobox.md +267 -0
- package/examples/component-command.md +299 -0
- package/examples/component-config-provider.md +190 -0
- package/examples/component-context-menu.md +179 -0
- package/examples/component-css-baseline.md +148 -0
- package/examples/component-date-picker.md +249 -0
- package/examples/component-descriptions.md +242 -0
- package/examples/component-dialog-actions.md +111 -0
- package/examples/component-dialog-content-text.md +76 -0
- package/examples/component-dialog-content.md +105 -0
- package/examples/component-dialog-title.md +104 -0
- package/examples/component-dialog.md +176 -0
- package/examples/component-divider.md +182 -0
- package/examples/component-doc-page.md +217 -0
- package/examples/component-drawer.md +257 -0
- package/examples/component-dropdown.md +220 -0
- package/examples/component-email-layout.md +253 -0
- package/examples/component-empty-state.md +269 -0
- package/examples/component-empty.md +172 -0
- package/examples/component-fade.md +87 -0
- package/examples/component-feature-grid.md +201 -0
- package/examples/component-field.md +266 -0
- package/examples/component-filled-input.md +114 -0
- package/examples/component-flex.md +117 -0
- package/examples/component-float-button.md +214 -0
- package/examples/component-form-control-label.md +134 -0
- package/examples/component-form-control.md +113 -0
- package/examples/component-form-controls.md +251 -0
- package/examples/component-form-group.md +86 -0
- package/examples/component-form-helper-text.md +95 -0
- package/examples/component-form-label.md +98 -0
- package/examples/component-form.md +291 -0
- package/examples/component-game-hud.md +362 -0
- package/examples/component-game-menu.md +327 -0
- package/examples/component-grid.md +140 -0
- package/examples/component-grow.md +79 -0
- package/examples/component-hero-block.md +252 -0
- package/examples/component-hover-card.md +211 -0
- package/examples/component-icon-button.md +142 -0
- package/examples/component-icon.md +102 -0
- package/examples/component-illustration.md +280 -0
- package/examples/component-image-list.md +107 -0
- package/examples/component-image.md +282 -0
- package/examples/component-input-adornment.md +101 -0
- package/examples/component-input-base.md +134 -0
- package/examples/component-input-number.md +141 -0
- package/examples/component-input-otp.md +271 -0
- package/examples/component-input.md +213 -0
- package/examples/component-item.md +243 -0
- package/examples/component-kbd.md +197 -0
- package/examples/component-krw-amount.md +219 -0
- package/examples/component-label.md +118 -0
- package/examples/component-layout.md +217 -0
- package/examples/component-link.md +223 -0
- package/examples/component-list-item-avatar.md +72 -0
- package/examples/component-list-item-button.md +139 -0
- package/examples/component-list-item-icon.md +82 -0
- package/examples/component-list-item-text.md +98 -0
- package/examples/component-list-item.md +116 -0
- package/examples/component-list-subheader.md +70 -0
- package/examples/component-list.md +198 -0
- package/examples/component-loading-button.md +125 -0
- package/examples/component-loading-sequence.md +254 -0
- package/examples/component-lottie-player.md +279 -0
- package/examples/component-masonry.md +191 -0
- package/examples/component-mentions.md +189 -0
- package/examples/component-menu-item.md +102 -0
- package/examples/component-menu-list.md +98 -0
- package/examples/component-menu.md +139 -0
- package/examples/component-menubar.md +259 -0
- package/examples/component-message.md +162 -0
- package/examples/component-mobile-stepper.md +155 -0
- package/examples/component-modal.md +220 -0
- package/examples/component-navigation-menu.md +295 -0
- package/examples/component-notification.md +166 -0
- package/examples/component-otp-countdown.md +245 -0
- package/examples/component-outlined-input.md +145 -0
- package/examples/component-page-transition.md +281 -0
- package/examples/component-pagination.md +226 -0
- package/examples/component-paper.md +199 -0
- package/examples/component-pass-auth.md +265 -0
- package/examples/component-payment-brand-button.md +253 -0
- package/examples/component-payment-method-selector.md +272 -0
- package/examples/component-payment-receipt.md +277 -0
- package/examples/component-popconfirm.md +144 -0
- package/examples/component-popover.md +239 -0
- package/examples/component-popper.md +129 -0
- package/examples/component-pricing-cards.md +247 -0
- package/examples/component-progress.md +195 -0
- package/examples/component-qr-code.md +201 -0
- package/examples/component-radio.md +167 -0
- package/examples/component-rate.md +202 -0
- package/examples/component-resizable.md +163 -0
- package/examples/component-result.md +270 -0
- package/examples/component-scroll-area.md +199 -0
- package/examples/component-scroll-reveal.md +320 -0
- package/examples/component-segmented.md +178 -0
- package/examples/component-select.md +258 -0
- package/examples/component-separator.md +177 -0
- package/examples/component-sheet.md +277 -0
- package/examples/component-sidebar.md +257 -0
- package/examples/component-skeleton.md +178 -0
- package/examples/component-slide.md +89 -0
- package/examples/component-slider.md +208 -0
- package/examples/component-snackbar-content.md +92 -0
- package/examples/component-snackbar.md +121 -0
- package/examples/component-sonner.md +165 -0
- package/examples/component-space.md +125 -0
- package/examples/component-spatial-locomotion.md +373 -0
- package/examples/component-spatial-panel.md +330 -0
- package/examples/component-speed-dial-action.md +78 -0
- package/examples/component-speed-dial.md +177 -0
- package/examples/component-spin.md +173 -0
- package/examples/component-spinner.md +204 -0
- package/examples/component-splitter.md +210 -0
- package/examples/component-stack.md +130 -0
- package/examples/component-statistic.md +282 -0
- package/examples/component-step-button.md +157 -0
- package/examples/component-step-connector.md +157 -0
- package/examples/component-step-content.md +121 -0
- package/examples/component-step-icon.md +115 -0
- package/examples/component-step-label.md +101 -0
- package/examples/component-step.md +84 -0
- package/examples/component-steps.md +264 -0
- package/examples/component-stock-chart.md +251 -0
- package/examples/component-swipeable-drawer.md +149 -0
- package/examples/component-switch.md +99 -0
- package/examples/component-tab-scroll-button.md +180 -0
- package/examples/component-tab.md +120 -0
- package/examples/component-table-body.md +82 -0
- package/examples/component-table-cell.md +118 -0
- package/examples/component-table-container.md +75 -0
- package/examples/component-table-footer.md +72 -0
- package/examples/component-table-head.md +78 -0
- package/examples/component-table-pagination.md +137 -0
- package/examples/component-table-row.md +113 -0
- package/examples/component-table-sort-label.md +109 -0
- package/examples/component-table.md +202 -0
- package/examples/component-tabs.md +184 -0
- package/examples/component-tag-badge.md +309 -0
- package/examples/component-tag.md +102 -0
- package/examples/component-testimonial-carousel.md +218 -0
- package/examples/component-textarea-autosize.md +114 -0
- package/examples/component-textarea.md +173 -0
- package/examples/component-time-picker.md +205 -0
- package/examples/component-timeline.md +170 -0
- package/examples/component-toast.md +224 -0
- package/examples/component-toggle-button.md +129 -0
- package/examples/component-toggle.md +220 -0
- package/examples/component-toolbar.md +104 -0
- package/examples/component-tooltip.md +178 -0
- package/examples/component-tour.md +176 -0
- package/examples/component-transaction-list-item.md +243 -0
- package/examples/component-transfer.md +156 -0
- package/examples/component-tree-select.md +202 -0
- package/examples/component-tree.md +297 -0
- package/examples/component-typography.md +215 -0
- package/examples/component-upload.md +295 -0
- package/examples/component-video-hero.md +409 -0
- package/examples/component-video-player.md +340 -0
- package/examples/component-voice-input.md +408 -0
- package/examples/component-watermark.md +217 -0
- package/examples/component-zoom.md +92 -0
- package/examples/doc-explanation-example.md +196 -0
- package/examples/doc-how-to-example.md +205 -0
- package/examples/doc-tutorial-example.md +162 -0
- package/examples/dogfood-korean-fintech-system.md +433 -0
- package/examples/email-transactional-example.md +259 -0
- package/examples/palette-saas-violet.md +235 -0
- package/examples/print-business-card-spec.md +205 -0
- package/examples/print-packaging-spec.md +285 -0
- package/examples/report-example.md +228 -0
- package/examples/slide-deck-example.md +237 -0
- package/examples/website-improvement-report.md +128 -0
- package/examples/website-improvement-workspace.json +126 -0
- package/install.sh +189 -0
- package/knowledge/COVERAGE.md +740 -0
- package/knowledge/PRINCIPLES.md +108 -0
- package/knowledge/a11y/contrast.md +70 -0
- package/knowledge/a11y/keyboard-and-focus.md +108 -0
- package/knowledge/colors/color-theory.md +90 -0
- package/knowledge/colors/mui-palette-structure.md +105 -0
- package/knowledge/colors/palettes-by-product-type.md +876 -0
- package/knowledge/components/INDEX.md +231 -0
- package/knowledge/components/index.json +1470 -0
- package/knowledge/components/shadcn-registry.md +159 -0
- package/knowledge/conversational/ai-chat-interfaces.md +323 -0
- package/knowledge/conversational/chatbot-design.md +312 -0
- package/knowledge/conversational/conversational-ui-fundamentals.md +299 -0
- package/knowledge/conversational/korean-voice-conventions.md +281 -0
- package/knowledge/conversational/voice-ui-patterns.md +297 -0
- package/knowledge/design-tokens/ant-design.md +124 -0
- package/knowledge/design-tokens/material-3.md +235 -0
- package/knowledge/design-tokens/polaris-and-carbon.md +231 -0
- package/knowledge/design-tokens/tailwind-v4.md +284 -0
- package/knowledge/game-ui/game-accessibility.md +317 -0
- package/knowledge/game-ui/game-ui-fundamentals.md +281 -0
- package/knowledge/game-ui/hud-design.md +324 -0
- package/knowledge/game-ui/korean-gaming-conventions.md +312 -0
- package/knowledge/game-ui/menu-systems.md +388 -0
- package/knowledge/i18n/korean-app-store-visual.md +223 -0
- package/knowledge/i18n/korean-document-style.md +301 -0
- package/knowledge/i18n/korean-payments.md +211 -0
- package/knowledge/i18n/korean-product-conventions.md +96 -0
- package/knowledge/i18n/korean-publishing.md +139 -0
- package/knowledge/i18n/korean-typography.md +123 -0
- package/knowledge/icons/curated-sets.md +225 -0
- package/knowledge/illustration/hero-illustrations.md +234 -0
- package/knowledge/illustration/illustration-systems.md +221 -0
- package/knowledge/illustration/mascot-design.md +208 -0
- package/knowledge/illustration/spot-illustrations.md +246 -0
- package/knowledge/illustration/svg-optimization.md +308 -0
- package/knowledge/layout/spacing-and-grid.md +119 -0
- package/knowledge/motion/app-loading-sequences.md +277 -0
- package/knowledge/motion/choreography-depth.md +297 -0
- package/knowledge/motion/marketing-motion.md +223 -0
- package/knowledge/motion/micro-interactions.md +266 -0
- package/knowledge/motion/motion-tools.md +281 -0
- package/knowledge/motion/principles.md +126 -0
- package/knowledge/patterns/auth-flow-design.md +316 -0
- package/knowledge/patterns/b2b-onboarding-flows.md +182 -0
- package/knowledge/patterns/brand-identity.md +238 -0
- package/knowledge/patterns/brand-references.md +97 -0
- package/knowledge/patterns/chart-color-encoding.md +269 -0
- package/knowledge/patterns/chart-types.md +344 -0
- package/knowledge/patterns/dashboard-composition.md +299 -0
- package/knowledge/patterns/design-system-qa.md +356 -0
- package/knowledge/patterns/document-typography.md +248 -0
- package/knowledge/patterns/email-design.md +338 -0
- package/knowledge/patterns/empty-states.md +263 -0
- package/knowledge/patterns/error-states.md +318 -0
- package/knowledge/patterns/form-design.md +237 -0
- package/knowledge/patterns/information-architecture.md +341 -0
- package/knowledge/patterns/landing-hero-design.md +283 -0
- package/knowledge/patterns/landing-page-patterns.md +681 -0
- package/knowledge/patterns/list-and-feed.md +371 -0
- package/knowledge/patterns/mobile-navigation.md +278 -0
- package/knowledge/patterns/money-and-amount.md +301 -0
- package/knowledge/patterns/onboarding.md +300 -0
- package/knowledge/patterns/pricing-page-design.md +261 -0
- package/knowledge/patterns/realtime-data.md +280 -0
- package/knowledge/patterns/report-design.md +330 -0
- package/knowledge/patterns/search-ux.md +373 -0
- package/knowledge/patterns/settings-page.md +325 -0
- package/knowledge/patterns/slide-deck-design.md +316 -0
- package/knowledge/patterns/styles-catalog.md +2599 -0
- package/knowledge/patterns/technical-writing.md +306 -0
- package/knowledge/patterns/ui-reasoning.md +1853 -0
- package/knowledge/patterns/ux-guidelines.md +1454 -0
- package/knowledge/platforms/react-native.md +395 -0
- package/knowledge/print/brochures-and-flyers.md +276 -0
- package/knowledge/print/korean-print-conventions.md +284 -0
- package/knowledge/print/packaging.md +321 -0
- package/knowledge/print/print-fundamentals.md +238 -0
- package/knowledge/print/signage-and-posters.md +235 -0
- package/knowledge/print/stationery.md +262 -0
- package/knowledge/spatial/ar-patterns.md +253 -0
- package/knowledge/spatial/comfort-and-accessibility.md +245 -0
- package/knowledge/spatial/spatial-design-fundamentals.md +346 -0
- package/knowledge/spatial/spatial-ui-elements.md +343 -0
- package/knowledge/spatial/vr-patterns.md +302 -0
- package/knowledge/typography/font-pairings.md +332 -0
- package/knowledge/typography/mui-type-scale.md +57 -0
- package/knowledge/typography/type-scale-fundamentals.md +105 -0
- package/knowledge/video/in-product-video.md +277 -0
- package/knowledge/video/korean-video-conventions.md +247 -0
- package/knowledge/video/marketing-video.md +258 -0
- package/knowledge/video/social-and-short-form.md +257 -0
- package/knowledge/video/video-fundamentals.md +296 -0
- package/package.json +106 -0
- package/skills/README.md +39 -0
- package/skills/color-palette/PLAYBOOK.md +175 -0
- package/skills/color-palette/SKILL.md +6 -0
- package/skills/color-palette/TEMPLATE.md +103 -0
- package/skills/component-spec-writer/PLAYBOOK.md +169 -0
- package/skills/component-spec-writer/SKILL.md +6 -0
- package/skills/component-spec-writer/TEMPLATE.md +115 -0
- package/skills/conversational-ui-designer/PLAYBOOK.md +231 -0
- package/skills/conversational-ui-designer/SKILL.md +6 -0
- package/skills/design-broadcast/PLAYBOOK.md +146 -0
- package/skills/design-broadcast/SKILL.md +6 -0
- package/skills/design-critique/PLAYBOOK.md +137 -0
- package/skills/design-critique/SKILL.md +6 -0
- package/skills/design-pr-review/PLAYBOOK.md +171 -0
- package/skills/design-pr-review/SKILL.md +6 -0
- package/skills/design-system-builder/PLAYBOOK.md +218 -0
- package/skills/design-system-builder/SKILL.md +6 -0
- package/skills/design-system-qa/PLAYBOOK.md +163 -0
- package/skills/design-system-qa/SKILL.md +6 -0
- package/skills/document-author/PLAYBOOK.md +167 -0
- package/skills/document-author/SKILL.md +6 -0
- package/skills/figma-token-sync/PLAYBOOK.md +149 -0
- package/skills/figma-token-sync/SKILL.md +6 -0
- package/skills/game-ui-designer/PLAYBOOK.md +209 -0
- package/skills/game-ui-designer/SKILL.md +6 -0
- package/skills/handoff-spec/PLAYBOOK.md +170 -0
- package/skills/handoff-spec/SKILL.md +6 -0
- package/skills/illustration-designer/PLAYBOOK.md +166 -0
- package/skills/illustration-designer/SKILL.md +6 -0
- package/skills/motion-designer/PLAYBOOK.md +223 -0
- package/skills/motion-designer/SKILL.md +6 -0
- package/skills/print-designer/PLAYBOOK.md +209 -0
- package/skills/print-designer/SKILL.md +6 -0
- package/skills/slide-deck-author/PLAYBOOK.md +198 -0
- package/skills/slide-deck-author/SKILL.md +6 -0
- package/skills/spatial-designer/PLAYBOOK.md +238 -0
- package/skills/spatial-designer/SKILL.md +6 -0
- package/skills/ux-audit/PLAYBOOK.md +142 -0
- package/skills/ux-audit/SKILL.md +6 -0
- package/skills/video-designer/PLAYBOOK.md +240 -0
- package/skills/video-designer/SKILL.md +6 -0
- package/skills/website-improvement/PLAYBOOK.md +118 -0
- package/skills/website-improvement/SKILL.md +6 -0
- package/skills/website-improvement/TEMPLATE.md +103 -0
- package/tools/audit/changelog-generate.py +176 -0
- package/tools/audit/check-coverage.py +483 -0
- package/tools/audit/doctor_assertions.py +256 -0
- package/tools/audit/example-qa.py +108 -0
- package/tools/audit/frontmatter-check.py +199 -0
- package/tools/audit/integration-check.py +95 -0
- package/tools/audit/korean-copy-check.py +161 -0
- package/tools/audit/link-check.py +146 -0
- package/tools/audit/local-ci.py +558 -0
- package/tools/audit/package-contents.py +723 -0
- package/tools/audit/package-smoke.py +22443 -0
- package/tools/audit/raw-hex-check.py +252 -0
- package/tools/audit/registry-smoke.py +8188 -0
- package/tools/audit/release-metadata.py +9832 -0
- package/tools/audit/run-all.py +351 -0
- package/tools/audit/smoke_assertions.py +12742 -0
- package/tools/audit/stability-review.py +332 -0
- package/tools/audit/stale-check.py +156 -0
- package/tools/migrations/add-version-frontmatter.py +132 -0
- package/tools/migrations/bump-last-updated.py +131 -0
- package/tools/migrations/promote-stability.py +172 -0
- package/tools/preview/README.md +58 -0
- package/tools/preview/render-tokens.py +454 -0
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
# 아키텍처
|
|
2
|
+
|
|
3
|
+
## 4 계층 구조
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
┌─────────────────────────────────────────────────────────────┐
|
|
7
|
+
│ 에이전트 인터페이스 (AGENTS.md, CLAUDE.md) │
|
|
8
|
+
│ ─ 모든 LLM이 이 레포를 읽고 시니어 디자이너처럼 동작하는 │
|
|
9
|
+
│ 진입 규약 │
|
|
10
|
+
└─────────────────────────────────────────────────────────────┘
|
|
11
|
+
▲
|
|
12
|
+
│ 읽음
|
|
13
|
+
▼
|
|
14
|
+
┌─────────────────────────────────────────────────────────────┐
|
|
15
|
+
│ 스킬 + 에이전트 + 커맨드 │
|
|
16
|
+
│ ─ 작업별 플레이북 (skills/) │
|
|
17
|
+
│ ─ 페르소나별 리뷰어 (agents/) │
|
|
18
|
+
│ ─ 사용자 호출 단축 (commands/) │
|
|
19
|
+
└─────────────────────────────────────────────────────────────┘
|
|
20
|
+
▲
|
|
21
|
+
│ 인용
|
|
22
|
+
▼
|
|
23
|
+
┌─────────────────────────────────────────────────────────────┐
|
|
24
|
+
│ 지식 베이스 (knowledge/) │
|
|
25
|
+
│ ─ 구조화 / 중복 제거 / 모델 친화 │
|
|
26
|
+
│ ─ tools/extractors/가 refs/에서 생성 │
|
|
27
|
+
│ ─ 핸드라이팅 오버라이드는 `<!-- hand-written -->`로 표시 │
|
|
28
|
+
└─────────────────────────────────────────────────────────────┘
|
|
29
|
+
▲
|
|
30
|
+
│ 파생
|
|
31
|
+
▼
|
|
32
|
+
┌─────────────────────────────────────────────────────────────┐
|
|
33
|
+
│ 소스 자료 (refs/) │
|
|
34
|
+
│ ─ Sparse-clone된 업스트림 디자인 시스템 │
|
|
35
|
+
│ ─ READ-ONLY. 절대 수정 금지. │
|
|
36
|
+
│ ─ `git -C refs/<repo> pull`로 갱신 │
|
|
37
|
+
└─────────────────────────────────────────────────────────────┘
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## 왜 모델 무관 (model-agnostic)인가
|
|
41
|
+
|
|
42
|
+
사용자는 여러 에이전트 표면(Claude Code, Codex CLI, Cursor 등)에서 디자인 작업을 호출해요. **마크다운 + JSON**으로 인코딩된 지식은 다음 환경에서 모두 살아남아요:
|
|
43
|
+
|
|
44
|
+
- Claude Code의 스킬 시스템
|
|
45
|
+
- Codex CLI의 `AGENTS.md` 컨벤션
|
|
46
|
+
- 모든 LLM의 일반 프롬프트 컨텍스트
|
|
47
|
+
|
|
48
|
+
같은 지식을 Claude 전용 스킬 파일로만 인코딩하면 lock-in 돼요. 우리는 ergonomics를 위해 스킬 시스템을 쓰지만, **진실의 원천(source of truth)**은 평범한 마크다운이에요.
|
|
49
|
+
|
|
50
|
+
## 지식 파일 계약
|
|
51
|
+
|
|
52
|
+
모든 `knowledge/` 아래 파일은 다음 형식을 따라요:
|
|
53
|
+
|
|
54
|
+
```markdown
|
|
55
|
+
---
|
|
56
|
+
title: <사람이 읽는 제목>
|
|
57
|
+
source: <업스트림 URL 또는 "hand-written">
|
|
58
|
+
extracted_at: <ISO 날짜, 핸드라이팅이면 생략>
|
|
59
|
+
applies_to: [<프레임워크 또는 범위 태그>]
|
|
60
|
+
version: 1.0.0
|
|
61
|
+
last_updated: 2026-05
|
|
62
|
+
stability: stable
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
# <제목>
|
|
66
|
+
|
|
67
|
+
<단일 / 집중된 주제. 400줄 이하.>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
생성 파일은 사람이 역추적할 수 있도록 source 경로를 반드시 포함해요.
|
|
71
|
+
|
|
72
|
+
### 버전 메타데이터 (v3.11+)
|
|
73
|
+
|
|
74
|
+
세 필드가 도입됐어요:
|
|
75
|
+
|
|
76
|
+
| 필드 | 의미 | 형식 |
|
|
77
|
+
| --- | --- | --- |
|
|
78
|
+
| `version` | 파일 자체의 안정성 (semver) | `1.0.0`, `1.2.3-beta` |
|
|
79
|
+
| `last_updated` | 마지막 substantive 리뷰 | `YYYY-MM` 또는 `YYYY-MM-DD` |
|
|
80
|
+
| `stability` | 라이프사이클 상태 | `stable` / `beta` / `experimental` / `deprecated` |
|
|
81
|
+
|
|
82
|
+
이 메타데이터는 `tools/audit/stale-check.py`로 검증돼요 — 6개월 이상 된 파일은 경고, 12개월 이상은 에러.
|
|
83
|
+
|
|
84
|
+
## 추출기 계약
|
|
85
|
+
|
|
86
|
+
`tools/extractors/`의 각 추출기는:
|
|
87
|
+
|
|
88
|
+
1. 단일 `refs/<source>/` 디렉토리에서 읽어요.
|
|
89
|
+
2. 단일 `knowledge/<category>/` 디렉토리에 써요.
|
|
90
|
+
3. **멱등성 (idempotent)** — 두 번 실행해도 같은 결과를 만들어요.
|
|
91
|
+
4. `<!-- hand-written -->` 표시된 파일은 절대 덮어쓰지 않아요.
|
|
92
|
+
5. 자체 헤더에 source 경로를 문서화해요.
|
|
93
|
+
|
|
94
|
+
## 스킬 파일 계약
|
|
95
|
+
|
|
96
|
+
```
|
|
97
|
+
skills/<skill-name>/
|
|
98
|
+
├── SKILL.md # Claude Code 스킬 매니페스트 (frontmatter + 본문)
|
|
99
|
+
├── PLAYBOOK.md # 단계별 프로세스 (모든 에이전트가 읽음)
|
|
100
|
+
├── TEMPLATE.md # 출력 템플릿 (해당하는 경우)
|
|
101
|
+
└── examples/ # 워크드 예제
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
Codex CLI는 `PLAYBOOK.md`를 직접 읽어요. Claude Code는 호출용으로 `SKILL.md`를 쓰지만 두 파일은 같은 내용을 공유해요 — `SKILL.md`는 `PLAYBOOK.md`에 frontmatter 래핑한 것.
|
|
105
|
+
|
|
106
|
+
### 검증 단계 (verification phase)
|
|
107
|
+
|
|
108
|
+
모든 PLAYBOOK은 끝에 검증 단계가 있어야 해요. 산출물이 다음을 충족하는지 체크:
|
|
109
|
+
|
|
110
|
+
- 인용 출처 ≥ 2개 (지식 파일 또는 업스트림).
|
|
111
|
+
- 모든 상태 / 케이스 다룸.
|
|
112
|
+
- 한국 컨벤션 적용 (해당하는 경우).
|
|
113
|
+
- 접근성 / 키보드 / ARIA / RN(필요시) 검증.
|
|
114
|
+
|
|
115
|
+
이게 산출물 품질을 시니어 디자인 리뷰 수준으로 끌어올려요.
|
|
116
|
+
|
|
117
|
+
## 왜 벡터 임베딩 안 쓰는가
|
|
118
|
+
|
|
119
|
+
검토했지만 이 버전에서는 거부했어요:
|
|
120
|
+
|
|
121
|
+
- 큐레이션된 지식은 50K 토큰 이내에 잘 들어가요. 직접 파일 읽기가 벡터 검색보다 빠르고 저렴해요.
|
|
122
|
+
- 마크다운은 grep 가능 / 사람이 감사 가능. 벡터는 안 그래요.
|
|
123
|
+
- 미래: 지식이 100K 토큰을 넘어가면 source-of-truth 계층은 그대로 두고 `tools/index/`에 옵션 임베딩 인덱스를 추가할 수 있어요.
|
|
124
|
+
|
|
125
|
+
## 갱신 주기
|
|
126
|
+
|
|
127
|
+
| 작업 | 시기 |
|
|
128
|
+
|---|---|
|
|
129
|
+
| `git -C refs/<repo> pull` | 월간, 또는 업스트림 신기능 참조 시 |
|
|
130
|
+
| `./tools/extractors/run-all.sh` | `refs/` 갱신 후 |
|
|
131
|
+
| 핸드라이팅 `knowledge/` 리뷰 | 분기, 또는 생태계 큰 변화 후 |
|
|
132
|
+
| `stable` 승격 검토 | 분기 (`tools/audit/stale-check.py --warn-months 3`) |
|
|
133
|
+
|
|
134
|
+
자세한 분기 의식은 [`docs/RELEASE-CHECKLIST.md`](RELEASE-CHECKLIST.md)의 "Stability promotion ritual" 참고.
|
|
135
|
+
|
|
136
|
+
## 배포 채널 (v3.x +)
|
|
137
|
+
|
|
138
|
+
design-ai는 4개 채널로 배포돼요:
|
|
139
|
+
|
|
140
|
+
| 채널 | 명령어 | 사용 케이스 |
|
|
141
|
+
|---|---|---|
|
|
142
|
+
| **NPM CLI** | `npx @design-ai/cli install` | 가장 빠른 시작 |
|
|
143
|
+
| **Homebrew** | `brew install design-ai` (tap 추가 후) | macOS 사용자 |
|
|
144
|
+
| **Git clone** | `git clone ... && ./install.sh` | 풀 컨트롤 / 커스터마이징 |
|
|
145
|
+
| **VS Code 확장** | `.vsix` 설치 | IDE 통합 / 사이드바 탐색 |
|
|
146
|
+
|
|
147
|
+
자세한 비교는 [`docs/DISTRIBUTION.ko.md`](DISTRIBUTION.ko.md) 참고.
|
|
148
|
+
|
|
149
|
+
## 8개 감사 (CI 게이팅)
|
|
150
|
+
|
|
151
|
+
| # | 스크립트 | 목적 |
|
|
152
|
+
| --- | --- | --- |
|
|
153
|
+
| 1 | `frontmatter-check.py` | YAML frontmatter 유효성 + 버전 필드 형식 |
|
|
154
|
+
| 2 | `link-check.py` | 내부 링크 해석 |
|
|
155
|
+
| 3 | `korean-copy-check.py` | 한국어 voice / register / typography |
|
|
156
|
+
| 4 | `raw-hex-check.py` | 예제 raw hex 색상 위생 |
|
|
157
|
+
| 5 | `integration-check.py` | 통합 워크스루 완전성 |
|
|
158
|
+
| 6 | `stale-check.py` | 지식 신선도 (`last_updated` 임계값) |
|
|
159
|
+
| 7 | `check-coverage.py` | 컴포넌트 / 스킬 / 예제 커버리지 리포트 |
|
|
160
|
+
| 8 | `example-qa.py` | 라우트별 대표 worked example 품질 |
|
|
161
|
+
|
|
162
|
+
PR마다 모두 실행돼요. 로컬에서 미리 돌리려면 [`docs/CONTRIBUTING.ko.md`](CONTRIBUTING.ko.md) 참고.
|
|
163
|
+
|
|
164
|
+
## 다국어 (i18n) 구조
|
|
165
|
+
|
|
166
|
+
doc 사이트는 `mkdocs-static-i18n`으로 EN + KO를 같이 호스팅해요:
|
|
167
|
+
|
|
168
|
+
```
|
|
169
|
+
mkdocs.yml # 사이트 설정 (EN + KO 둘 다)
|
|
170
|
+
site-src/ # 빌드 입력 (build-docs.sh가 만든 심볼릭 팜)
|
|
171
|
+
docs/*.md # 영문 원본
|
|
172
|
+
docs/*.ko.md # 한국어 번역 — `/ko/...` 경로로 호스팅
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
새 한국어 페이지 추가는 `docs/<file>.ko.md`로 짝 파일을 만들고 `mkdocs.yml` nav에 등록.
|
|
176
|
+
|
|
177
|
+
## 참고 문서
|
|
178
|
+
|
|
179
|
+
- [`docs/CONTRIBUTING.ko.md`](CONTRIBUTING.ko.md) — 기여 가이드
|
|
180
|
+
- [`docs/USING.ko.md`](USING.ko.md) — 사용자 가이드
|
|
181
|
+
- [`docs/SESSION-LOG.md`](SESSION-LOG.md) — v2.0 → v4.0 내러티브
|
|
182
|
+
- [`docs/ROADMAP.md`](ROADMAP.md) — 단계별 상세
|
|
183
|
+
- [`AGENTS.ko.md`](../AGENTS.ko.md) — 에이전트 진입점
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
# Architecture
|
|
2
|
+
|
|
3
|
+
## Three layers
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
┌─────────────────────────────────────────────────────────────┐
|
|
7
|
+
│ Agent Interface (AGENTS.md, CLAUDE.md) │
|
|
8
|
+
│ ─ How any LLM picks up this repo and behaves like a senior │
|
|
9
|
+
│ designer │
|
|
10
|
+
└─────────────────────────────────────────────────────────────┘
|
|
11
|
+
▲
|
|
12
|
+
│ reads from
|
|
13
|
+
▼
|
|
14
|
+
┌─────────────────────────────────────────────────────────────┐
|
|
15
|
+
│ Skills + Agents + Commands │
|
|
16
|
+
│ ─ Task-specific playbooks (skills/) │
|
|
17
|
+
│ ─ Persona-specific reviewers (agents/) │
|
|
18
|
+
│ ─ User-invocable shortcuts (commands/) │
|
|
19
|
+
└─────────────────────────────────────────────────────────────┘
|
|
20
|
+
▲
|
|
21
|
+
│ cites
|
|
22
|
+
▼
|
|
23
|
+
┌─────────────────────────────────────────────────────────────┐
|
|
24
|
+
│ Knowledge Base (knowledge/) │
|
|
25
|
+
│ ─ Structured, deduplicated, model-readable │
|
|
26
|
+
│ ─ Generated by tools/extractors/ from refs/ │
|
|
27
|
+
│ ─ Hand-written overrides marked with `<!-- hand-written -->`│
|
|
28
|
+
└─────────────────────────────────────────────────────────────┘
|
|
29
|
+
▲
|
|
30
|
+
│ derived from
|
|
31
|
+
▼
|
|
32
|
+
┌─────────────────────────────────────────────────────────────┐
|
|
33
|
+
│ Source Material (refs/) │
|
|
34
|
+
│ ─ Sparse-cloned upstream design systems │
|
|
35
|
+
│ ─ READ-ONLY. Never edit. │
|
|
36
|
+
│ ─ Refresh via `git -C refs/<repo> pull` │
|
|
37
|
+
└─────────────────────────────────────────────────────────────┘
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Why model-agnostic?
|
|
41
|
+
|
|
42
|
+
The user invokes design work from multiple agent surfaces (Claude Code, Codex CLI, sometimes Cursor). Knowledge encoded in **markdown + JSON** survives across:
|
|
43
|
+
|
|
44
|
+
- Claude Code's skill system
|
|
45
|
+
- Codex CLI's `AGENTS.md` convention
|
|
46
|
+
- Generic prompt context for any LLM
|
|
47
|
+
|
|
48
|
+
Encoding the same knowledge as Claude-specific skill files would lock it in. We use the skill system for ergonomics, but the **source of truth** is plain markdown.
|
|
49
|
+
|
|
50
|
+
## Knowledge file contract
|
|
51
|
+
|
|
52
|
+
Every file under `knowledge/` follows this shape:
|
|
53
|
+
|
|
54
|
+
```markdown
|
|
55
|
+
---
|
|
56
|
+
title: <human-readable title>
|
|
57
|
+
source: <upstream URL or "hand-written">
|
|
58
|
+
extracted_at: <ISO date, omit if hand-written>
|
|
59
|
+
applies_to: [<framework or scope tags>]
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
# <title>
|
|
63
|
+
|
|
64
|
+
<single, focused topic. Under 400 lines.>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
If a file is generated, it must include the source path so a human can trace it back.
|
|
68
|
+
|
|
69
|
+
## Extractor contract
|
|
70
|
+
|
|
71
|
+
Each extractor in `tools/extractors/`:
|
|
72
|
+
|
|
73
|
+
1. Reads from a single `refs/<source>/` directory.
|
|
74
|
+
2. Writes to a single `knowledge/<category>/` directory.
|
|
75
|
+
3. Is idempotent — running twice produces the same output.
|
|
76
|
+
4. Never overwrites files marked `<!-- hand-written -->`.
|
|
77
|
+
5. Documents its source paths in its own header.
|
|
78
|
+
|
|
79
|
+
## Skill file contract
|
|
80
|
+
|
|
81
|
+
```
|
|
82
|
+
skills/<skill-name>/
|
|
83
|
+
├── SKILL.md # Claude Code skill manifest (frontmatter + body)
|
|
84
|
+
├── PLAYBOOK.md # Step-by-step process (read by any agent)
|
|
85
|
+
├── TEMPLATE.md # Output template, if applicable
|
|
86
|
+
└── examples/ # Worked examples
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Codex CLI reads `PLAYBOOK.md` directly. Claude Code uses `SKILL.md` for invocation, but both files share the same content — `SKILL.md` is `PLAYBOOK.md` with frontmatter wrapping.
|
|
90
|
+
|
|
91
|
+
## Why not vector embeddings?
|
|
92
|
+
|
|
93
|
+
Considered, rejected for this version:
|
|
94
|
+
|
|
95
|
+
- Knowledge fits well under 50K tokens once curated. Direct file reads are faster and cheaper than vector retrieval.
|
|
96
|
+
- Markdown is grep-able and human-auditable. Vectors are not.
|
|
97
|
+
- Future: if knowledge grows past ~100K tokens, add an optional embedding index in `tools/index/` without changing the source-of-truth layer.
|
|
98
|
+
|
|
99
|
+
## Refresh cadence
|
|
100
|
+
|
|
101
|
+
| Action | When |
|
|
102
|
+
|---|---|
|
|
103
|
+
| `git -C refs/<repo> pull` | Monthly, or when a new feature in upstream is referenced |
|
|
104
|
+
| `./tools/extractors/run-all.sh` | After any `refs/` update |
|
|
105
|
+
| Hand-written `knowledge/` review | Quarterly, or after major ecosystem shifts |
|
|
@@ -0,0 +1,311 @@
|
|
|
1
|
+
# Codex CLI integration
|
|
2
|
+
|
|
3
|
+
How to use design-ai with **OpenAI Codex CLI** (Anthropic-compatible MCP). Codex is the primary "non-Claude-Code" agent target for this project.
|
|
4
|
+
|
|
5
|
+
> **Looking for a worked example?** See [`docs/integrations/codex-walkthrough.md`](integrations/codex-walkthrough.md) — concrete session walkthroughs for spec'ing components, generating design systems, iterating on critiques, and auditing Figma exports.
|
|
6
|
+
|
|
7
|
+
## Quickstart
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
cd /path/to/design-ai
|
|
11
|
+
codex
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
Codex automatically reads `AGENTS.md` from the project root. It primes itself, navigates `knowledge/`, applies `skills/`, and produces deliverables.
|
|
15
|
+
|
|
16
|
+
**No additional setup is required for read-only design tasks.** For full feature parity with Claude Code (slash commands, agent personas), see below.
|
|
17
|
+
|
|
18
|
+
## File-loading order
|
|
19
|
+
|
|
20
|
+
Codex respects this load order:
|
|
21
|
+
|
|
22
|
+
1. `AGENTS.md` — universal entry (auto-loaded by Codex)
|
|
23
|
+
2. `knowledge/PRINCIPLES.md` — referenced by AGENTS.md as "step 0"
|
|
24
|
+
3. `knowledge/<category>/<file>.md` — loaded on demand per task
|
|
25
|
+
4. `skills/<skill>/PLAYBOOK.md` — loaded when invoked
|
|
26
|
+
5. `examples/component-<name>.md` — loaded as quality reference
|
|
27
|
+
|
|
28
|
+
Codex doesn't auto-load `CLAUDE.md` (it's Claude-specific) — `AGENTS.md` is the single source of truth.
|
|
29
|
+
|
|
30
|
+
## Invoking skills in Codex
|
|
31
|
+
|
|
32
|
+
Codex doesn't have a "skill system" in the Claude Code sense. Skills are invoked by reference:
|
|
33
|
+
|
|
34
|
+
```
|
|
35
|
+
User: Generate a fintech color palette for a Korean B2C app.
|
|
36
|
+
Codex: [reads AGENTS.md → opens skills/color-palette/PLAYBOOK.md → applies it]
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Or explicitly:
|
|
40
|
+
|
|
41
|
+
```
|
|
42
|
+
User: Apply the color-palette skill to "calming, premium" with a teal seed.
|
|
43
|
+
Codex: [opens skills/color-palette/PLAYBOOK.md → executes the playbook]
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Invoking slash commands
|
|
47
|
+
|
|
48
|
+
Codex doesn't have a `/command` system. The body of each `commands/*.md` file is a **prompt template** — you can:
|
|
49
|
+
|
|
50
|
+
### Option A: Copy-paste the body
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
cat commands/design-from-brief.md
|
|
54
|
+
# → Copy the body, replace $ARGUMENTS with your brief, paste into Codex
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Option B: Reference by path
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
User: Apply commands/design-from-brief.md with this brief: "Korean fintech tracker, calming, premium, RN."
|
|
61
|
+
Codex: [reads the command file, parses the brief, executes the orchestrated steps]
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
This works because the command file documents the orchestration steps explicitly.
|
|
65
|
+
|
|
66
|
+
## Invoking agent personas
|
|
67
|
+
|
|
68
|
+
`agents/*.md` files contain self-contained role definitions. Codex can adopt them via:
|
|
69
|
+
|
|
70
|
+
```
|
|
71
|
+
User: Adopt the persona at agents/design-critic.md and review this Figma link: ...
|
|
72
|
+
Codex: [reads the persona definition → behaves accordingly]
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
For independent parallel reviews (e.g., a11y-reviewer + design-critic on the same artifact): Codex doesn't natively spawn parallel sub-agents the way Claude Code does. Run them sequentially:
|
|
76
|
+
|
|
77
|
+
```
|
|
78
|
+
User: First, apply agents/a11y-reviewer.md to audit this design.
|
|
79
|
+
[wait for output]
|
|
80
|
+
User: Now apply agents/design-critic.md to the same design.
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Or compose them into one prompt:
|
|
84
|
+
|
|
85
|
+
```
|
|
86
|
+
User: Apply agents/a11y-reviewer.md AND agents/design-critic.md to this design.
|
|
87
|
+
Run them as two separate analyses; combine findings at the end with no
|
|
88
|
+
duplicates.
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## MCP / tool access
|
|
92
|
+
|
|
93
|
+
Codex CLI supports MCP servers. Useful integrations for design-ai:
|
|
94
|
+
|
|
95
|
+
### design-ai MCP server
|
|
96
|
+
|
|
97
|
+
Use this when you want Codex to call design-ai through MCP tools instead of manually reading repo files:
|
|
98
|
+
|
|
99
|
+
```bash
|
|
100
|
+
codex mcp add design-ai -- design-ai mcp
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
Or add it to `~/.codex/config.toml`:
|
|
104
|
+
|
|
105
|
+
```toml
|
|
106
|
+
[mcp_servers.design-ai]
|
|
107
|
+
command = "design-ai"
|
|
108
|
+
args = ["mcp"]
|
|
109
|
+
startup_timeout_sec = 10
|
|
110
|
+
tool_timeout_sec = 60
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
If `design-ai` is not on `PATH`, point Codex at the local clone:
|
|
114
|
+
|
|
115
|
+
```toml
|
|
116
|
+
[mcp_servers.design-ai]
|
|
117
|
+
command = "node"
|
|
118
|
+
args = ["/path/to/design-ai/cli/bin/design-ai-mcp.mjs"]
|
|
119
|
+
cwd = "/path/to/design-ai"
|
|
120
|
+
startup_timeout_sec = 10
|
|
121
|
+
tool_timeout_sec = 60
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
In the Codex TUI, run `/mcp` and confirm that `design-ai` is active.
|
|
125
|
+
|
|
126
|
+
See [`docs/integrations/design-ai-mcp-server.md`](integrations/design-ai-mcp-server.md) for the tool list and Claude Code setup.
|
|
127
|
+
|
|
128
|
+
### Figma MCP (recommended)
|
|
129
|
+
|
|
130
|
+
```bash
|
|
131
|
+
# Install and configure the Figma MCP server
|
|
132
|
+
# Per https://github.com/figma/mcp-server (or vendor docs)
|
|
133
|
+
|
|
134
|
+
# Add to your ~/.codex/config.toml:
|
|
135
|
+
[mcp_servers.figma]
|
|
136
|
+
command = "node"
|
|
137
|
+
args = ["/path/to/figma-mcp-server"]
|
|
138
|
+
env = { FIGMA_API_KEY = "your-key" }
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
After setup, Codex can:
|
|
142
|
+
- `figma.get_metadata(file_key)` — file structure
|
|
143
|
+
- `figma.get_variables(file_key)` — extract design tokens from a file
|
|
144
|
+
- `figma.get_code_connect_map(file_key)` — Code Connect mapping
|
|
145
|
+
|
|
146
|
+
See [`docs/FIGMA-INTEGRATION.md`](FIGMA-INTEGRATION.md) for the workflows.
|
|
147
|
+
|
|
148
|
+
### Filesystem access
|
|
149
|
+
|
|
150
|
+
Codex has filesystem access by default (within the project root). It can:
|
|
151
|
+
- Read any file in the repo (`refs/`, `knowledge/`, etc.)
|
|
152
|
+
- Write to any file (with user confirmation depending on Codex version)
|
|
153
|
+
- Run shell commands (extractors, audit, preview generator)
|
|
154
|
+
|
|
155
|
+
## Recommended setup
|
|
156
|
+
|
|
157
|
+
Three approaches, ordered by preference:
|
|
158
|
+
|
|
159
|
+
### A. Minimal (works out of the box)
|
|
160
|
+
|
|
161
|
+
```bash
|
|
162
|
+
cd /path/to/design-ai
|
|
163
|
+
codex "Generate a Korean fintech design system"
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
Just point Codex at the directory. AGENTS.md does the rest.
|
|
167
|
+
|
|
168
|
+
### B. Per-task context loading
|
|
169
|
+
|
|
170
|
+
For higher-quality output on specific tasks, explicitly load the relevant files:
|
|
171
|
+
|
|
172
|
+
```bash
|
|
173
|
+
codex \
|
|
174
|
+
--file AGENTS.md \
|
|
175
|
+
--file knowledge/PRINCIPLES.md \
|
|
176
|
+
--file skills/color-palette/PLAYBOOK.md \
|
|
177
|
+
--file knowledge/colors/color-theory.md \
|
|
178
|
+
--file knowledge/i18n/korean-typography.md \
|
|
179
|
+
"Generate a teal-primary palette for a Korean fintech B2C consumer app."
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
(Codex flag may differ; check `codex --help`.)
|
|
183
|
+
|
|
184
|
+
### C. System prompt overlay
|
|
185
|
+
|
|
186
|
+
Concatenate the entry docs into a system prompt:
|
|
187
|
+
|
|
188
|
+
```bash
|
|
189
|
+
cat AGENTS.md knowledge/PRINCIPLES.md > /tmp/system-prompt.md
|
|
190
|
+
codex --system /tmp/system-prompt.md "your design task"
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
This primes every turn with the design-ai context.
|
|
194
|
+
|
|
195
|
+
## Token budget
|
|
196
|
+
|
|
197
|
+
Each task only needs the relevant subset:
|
|
198
|
+
|
|
199
|
+
| Task | Files to load | ~Token budget |
|
|
200
|
+
| --- | --- | --- |
|
|
201
|
+
| Color palette | AGENTS.md + PRINCIPLES.md + skills/color-palette/PLAYBOOK.md + knowledge/colors/color-theory.md + knowledge/colors/palettes-by-product-type.md + knowledge/a11y/contrast.md | ~15K |
|
|
202
|
+
| Component spec | AGENTS.md + PRINCIPLES.md + skills/component-spec-writer/PLAYBOOK.md + knowledge/components/INDEX.md + knowledge/a11y/keyboard-and-focus.md + relevant refs/ source | ~20K |
|
|
203
|
+
| UX audit | AGENTS.md + PRINCIPLES.md + skills/ux-audit/PLAYBOOK.md + knowledge/patterns/ux-guidelines.md + a11y files | ~12K |
|
|
204
|
+
| Full design system | AGENTS.md + PRINCIPLES.md + skills/design-system-builder/PLAYBOOK.md + 8-10 knowledge files | ~40K |
|
|
205
|
+
|
|
206
|
+
All well within Codex's context window. **Don't load everything** — pick what's relevant.
|
|
207
|
+
|
|
208
|
+
## Best practices
|
|
209
|
+
|
|
210
|
+
### Use the verification phase
|
|
211
|
+
|
|
212
|
+
Each skill's PLAYBOOK has a "Verification phase" section. Tell Codex to apply it explicitly:
|
|
213
|
+
|
|
214
|
+
```
|
|
215
|
+
User: Generate the palette, then run the verification phase from
|
|
216
|
+
skills/color-palette/PLAYBOOK.md against your output.
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
Or include in the system prompt:
|
|
220
|
+
|
|
221
|
+
```
|
|
222
|
+
At the end of every artifact, run the verification phase from the relevant
|
|
223
|
+
skill PLAYBOOK and report any issues you found.
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
### Prefer the structured commands
|
|
227
|
+
|
|
228
|
+
Don't ask Codex to "design a system" without context. Use the orchestrating commands:
|
|
229
|
+
|
|
230
|
+
```
|
|
231
|
+
✓ "Apply commands/design-from-brief.md with brief: ..."
|
|
232
|
+
✓ "Apply skills/component-spec-writer/PLAYBOOK.md to a Tooltip component."
|
|
233
|
+
|
|
234
|
+
✗ "Make me a design system."
|
|
235
|
+
✗ "Spec a tooltip."
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
The commands carry the verification + citation discipline.
|
|
239
|
+
|
|
240
|
+
### Cite the knowledge
|
|
241
|
+
|
|
242
|
+
Tell Codex you expect citations:
|
|
243
|
+
|
|
244
|
+
```
|
|
245
|
+
For every major claim in the output, cite the knowledge/ file you got
|
|
246
|
+
it from. If you didn't consult a knowledge file for a claim, mark
|
|
247
|
+
the claim as "(judgment, not sourced)".
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
This is part of the AGENTS.md instruction set but worth re-emphasizing per task.
|
|
251
|
+
|
|
252
|
+
### Re-run extractors as needed
|
|
253
|
+
|
|
254
|
+
If the upstream design systems get updated:
|
|
255
|
+
|
|
256
|
+
```bash
|
|
257
|
+
cd /path/to/design-ai
|
|
258
|
+
bash tools/clone-refs.sh # pull latest
|
|
259
|
+
bash tools/extractors/run-all.sh # regenerate knowledge/
|
|
260
|
+
python3 tools/audit/check-coverage.py # update COVERAGE.md
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
Then commit. Codex will pick up the updated knowledge automatically.
|
|
264
|
+
|
|
265
|
+
## Common Codex pitfalls
|
|
266
|
+
|
|
267
|
+
| Pitfall | Fix |
|
|
268
|
+
| --- | --- |
|
|
269
|
+
| Codex invents component APIs without consulting refs/ | Add to system prompt: "Never invent component APIs. Cite refs/ for every prop." |
|
|
270
|
+
| Codex outputs hex values without contrast verification | Add: "Color outputs must include a contrast matrix per AGENTS.md rule 6." |
|
|
271
|
+
| Codex skips the verification phase | Explicitly request it at the end of each task. |
|
|
272
|
+
| Codex loads too many files | Be selective. Only the files needed for the task. |
|
|
273
|
+
| Codex mixes Korean and English inconsistently | Specify language up front. "All output should be in Korean." |
|
|
274
|
+
|
|
275
|
+
## Codex vs Claude Code — when to use which
|
|
276
|
+
|
|
277
|
+
| Scenario | Recommendation |
|
|
278
|
+
| --- | --- |
|
|
279
|
+
| Quick palette generation | Codex CLI (lightweight, scriptable) |
|
|
280
|
+
| Long-running design system bootstrap | Either; Claude Code's TodoWrite tracks progress better |
|
|
281
|
+
| Multi-agent parallel reviews | Claude Code (sub-agent spawning) |
|
|
282
|
+
| CI integration (no human in loop) | Codex CLI (better headless ergonomics) |
|
|
283
|
+
| Visual review with `tools/preview/render-tokens.py` | Either (both can run shell commands) |
|
|
284
|
+
| Plugin packaging / sharing | Claude Code (plugin format more developed) |
|
|
285
|
+
|
|
286
|
+
For this project's design tasks: **Codex is fully sufficient**. Claude Code's advantages are mostly orchestration ergonomics for very long sessions.
|
|
287
|
+
|
|
288
|
+
## Troubleshooting
|
|
289
|
+
|
|
290
|
+
**"Codex doesn't know about my project."**
|
|
291
|
+
|
|
292
|
+
Check that `AGENTS.md` exists at the project root. Codex auto-loads from there. If it didn't load, your CLI version may not yet support `AGENTS.md` discovery — pass it explicitly via `--file`.
|
|
293
|
+
|
|
294
|
+
**"Codex output is generic / not citing knowledge files."**
|
|
295
|
+
|
|
296
|
+
Ensure `knowledge/PRINCIPLES.md` is loaded. The "step 0" priming reference is in `AGENTS.md`. If you customize the system prompt, include `PRINCIPLES.md` content directly.
|
|
297
|
+
|
|
298
|
+
**"Codex doesn't know about my custom components."**
|
|
299
|
+
|
|
300
|
+
Custom components live in `examples/component-*.md`. Either pass them via `--file` or reference them in the prompt: "Refer to examples/component-amount-input.md for the existing AmountInput pattern."
|
|
301
|
+
|
|
302
|
+
**"Codex's MCP setup for Figma isn't working."**
|
|
303
|
+
|
|
304
|
+
Codex MCP setup is vendor-specific. Check the OpenAI Codex docs and `~/.codex/config.toml` configuration. The Figma MCP server itself is generic — same instance works with Claude Code.
|
|
305
|
+
|
|
306
|
+
## Cross-reference
|
|
307
|
+
|
|
308
|
+
- [`docs/USING.md`](USING.md) — multi-agent setup overview
|
|
309
|
+
- [`docs/FIGMA-INTEGRATION.md`](FIGMA-INTEGRATION.md) — Figma MCP details
|
|
310
|
+
- [`AGENTS.md`](../AGENTS.md) — universal agent instructions
|
|
311
|
+
- [`knowledge/PRINCIPLES.md`](../knowledge/PRINCIPLES.md) — agent priming
|