القائمة
Intent-First design craft specialist covering design direction, domain vocabulary, design memory, and post-build critique. Use when establishing design intent or auditing code against design principles.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | moai-design-craft |
| description | Intent-First design craft specialist covering design direction, domain vocabulary, design memory, and post-build critique. Use when establishing design intent or auditing code against design principles. |
| license | Apache-2.0 |
| compatibility | Designed for Claude Code |
| allowed-tools | Read, Grep, Glob |
| user-invocable | false |
| metadata | {"version":"1.2.0","category":"domain","status":"active","updated":"2026-03-30","modularized":"true","tags":"design, craft, intent-first, design-direction, domain-exploration, design-memory, critique, web-copy, ux-writing, headline, cta","related-skills":"moai-domain-uiux, moai-design-tools, moai-domain-frontend"} |
| progressive_disclosure | {"enabled":true,"level1_tokens":100,"level2_tokens":4500} |
| triggers | {"keywords":["intent-first","design craft","design direction","design intent","domain exploration","design critique","craft review","design memory","design system","system.md","design audit","why before what","design extract","interface design","web copy","ux writing","headline","cta copy","landing page copy","anti-ai writing"],"agents":["expert-frontend","team-designer"],"phases":["plan","run","review"]} |
Intent-First design philosophy integrated into MoAI workflows. Ensures design decisions flow from intent and domain understanding, not from visual impulse.
Intent-First: Before any visual or component decision, establish why — the domain, the user, the interaction contract, and the craft principles that apply.
The three craft operations:
| Operation | When | What It Does |
|---|---|---|
| Design Direction | At /moai plan (design keywords) | Domain exploration, intent capture, vocabulary alignment |
| Design Audit | At /moai review --design | Checks implementation against .moai/design/system.md |
| Design Critique | At /moai review --critique | Post-build craft review: observe, diagnose, rebuild decision |
modules/intent-first.md — Intent-First process: domain exploration, design direction, vocabularymodules/design-memory.md — .moai/design/system.md read/write protocolmodules/critique-workflow.md — Post-build critique: observe → diagnose → rebuild, hard rules and rejection criteriamodules/web-copy-craft.md — Web copy guidelines: anti-AI writing, headline formulas, CTA patterns, body copy rhythmWhen manager-spec detects design-relevant keywords, trigger Design Direction:
.moai/design/system.md (if it exists) for established vocabulary and intent.moai/design/system.mdWhen /moai review --design is invoked:
.moai/design/system.md for current design system rulesWhen /moai review --critique is invoked:
When expert-frontend or team-designer generates web pages, apply copy craft rules:
moai-domain-uiux — Design tokens, WCAG, accessibility (complementary, not overlapping)moai-design-tools — Figma/Pencil tool mechanics (complementary, not overlapping)moai-domain-frontend — Component implementation patternsVersion: 1.2.0 Last Updated: 2026-03-30
| Rationalization | Reality |
|---|---|
| "Design direction is just aesthetics, the code works the same" | Design intent drives user perception and brand consistency. Code without design direction produces generic, forgettable interfaces. |
| "I will figure out the design vocabulary during implementation" | Naming components without a design vocabulary produces inconsistent names. Establish vocabulary before building. |
| "Design memory is unnecessary, the design system is the reference" | Design systems define what to use. Design memory captures why decisions were made and what was rejected. |
| "Post-build critique is just a formality" | Critique reveals drift between intent and execution. Without it, the gap accumulates with each iteration. |
| "This is an internal tool, design does not matter" | Internal users have the same cognitive load as external users. Poor design increases training cost and error rates. |
Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil designs, or exporting to React/Tailwind code.
Documentation generation patterns for technical specs, API docs, user guides, and knowledge bases using real tools like Sphinx, MkDocs, TypeDoc, and Nextra. Use when creating docs from code, building doc sites, or automating documentation workflows.
Backend development specialist covering API design, database integration, microservices architecture, and modern backend patterns. Use when designing APIs, implementing server logic, authentication, or authorization.
Brand-aligned visual design system specialist for web projects. Enforces hero-first layout chaining, WCAG 2.1 AA accessibility, Lighthouse >= 80, and design token extraction from brand identity files. Covers color palettes, typography, spacing, and component specifications.
Brand-aligned copywriting specialist for marketing and product text. Enforces brand voice, anti-AI-slop rules, concrete numbers, and JSON section structure for downstream agent consumption. Covers hero, features, social_proof, cta, and footer sections with A/B variant output.
Database specialist covering PostgreSQL, MongoDB, Redis, Oracle, and advanced data patterns for modern applications. Use for database schema design, query optimization, indexing strategies, or data modeling.