{"id":"36ee818c-efd1-4d56-a76e-40cdbeb44159","entityType":"agent","slug":"clawhub-bovinphang-fec-ui-design","name":"UI Design","canonicalUrl":"https://www.xpersona.co/agent/clawhub-bovinphang-fec-ui-design","canonicalPath":"/agent/clawhub-bovinphang-fec-ui-design","generatedAt":"2026-10-11T15:17:43.347Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T12:31:19.223Z","emptyReason":null},"description":"Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or Skill: UI Design Owner: bovinphang Summary: Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or Tags: latest:2.9.0 Version history: v2.9.0 | 2026-09-27T03:52:43.126Z | user","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.1K downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s175m64gr8tsfc06cj22czzfys83mp52:fec-ui-design","sourceUrl":"https://clawhub.ai/bovinphang/fec-ui-design","homepage":"https://clawhub.ai/bovinphang/skills/fec-ui-design","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/bovinphang/fec-ui-design","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/bovinphang/skills/fec-ui-design","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":61,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctiv"},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T12:31:19.223Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T12:31:19.223Z","emptyReason":null},"stars":null,"forks":null,"downloads":1064,"packageName":null,"latestVersion":"2.9.0","tractionLabel":"1.1K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T12:31:19.154Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T12:31:19.223Z","lastCrawledAt":"2026-10-11T12:31:19.154Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T12:31:19.154Z","lastVerifiedAt":null,"highlights":[{"version":"2.9.0","createdAt":"2026-09-27T03:52:43.126Z","changelog":"- Major simplification and partial English translation of documentation in SKILL.md. - Removed detailed step-by-step design procedures and constraints; retained main workflow stages in more concise form. - Added LICENSE file; removed skill-card.md documentation. - SKILL.md description tightened and edited for brevity. - Documentation is now accessible to a broader (English-reading) audience, but with less procedural depth.","fileCount":15,"zipByteSize":29168},{"version":"2.7.0","createdAt":"2026-06-11T02:08:25.772Z","changelog":"Summary: Expanded design constraints, updated procedures for more robust anti-generic UI outcomes, and removed outdated documentation. - Added a new step for \"读取设计语境\", improving early-stage design clarity and contextual anchoring. - Enhanced visual anti-pattern constraints, with explicit bans on zigzag layouts, repetitive eyebrows, fake screenshots, and repetitive section structures. - Updated the design \"Procedure\" to prioritize media authenticity, clear navigation, task-focused first screens, and adaptive page archetypes. - Expanded the \"验证设计结果\" (validation) to cover new anti-generic checks and device/user context requirements. - Removed outdated sample documentation file (skill-card.md).","fileCount":14,"zipByteSize":29234},{"version":"2.5.0","createdAt":"2026-06-07T14:15:42.589Z","changelog":"- Comprehensive rewrite of SKILL.md with deeper, step-by-step guidance for UI direction, systemization, hierarchy, and polish. - Clarifies when and how to use authoritative external design sources vs. generating new direction. - Adds structured, checklist-driven procedures for UI/UX QA, design-system generation, visual identity, and responsive behavior. - Expands on do's and don'ts for product-specific UI, anti-generic choices, and frontend polish across various page and product types. - Introduces detailed constraints to avoid common generic patterns and enforce context-sensitive, distinctive UI solutions.","fileCount":14,"zipByteSize":23459}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s175m64gr8tsfc06cj22czzfys83mp52:fec-ui-design","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-ui-design/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-ui-design/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-ui-design/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-ui-design/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-ui-design/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-ui-design/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-11T15:17:43.342Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-ui-design/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-ui-design/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-ui-design/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-ui-design/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T12:31:19.223Z","emptyReason":null},"readme":"Skill: UI Design\n\nOwner: bovinphang\n\nSummary: Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or\n\nTags: latest:2.9.0\n\nVersion history:\n\nv2.9.0 | 2026-09-27T03:52:43.126Z | user\n\n- Major simplification and partial English translation of documentation in SKILL.md.\n- Removed detailed step-by-step design procedures and constraints; retained main workflow stages in more concise form.\n- Added LICENSE file; removed skill-card.md documentation.\n- SKILL.md description tightened and edited for brevity.\n- Documentation is now accessible to a broader (English-reading) audience, but with less procedural depth.\n\nv2.7.0 | 2026-06-11T02:08:25.772Z | user\n\nSummary: Expanded design constraints, updated procedures for more robust anti-generic UI outcomes, and removed outdated documentation.\n\n- Added a new step for \"读取设计语境\", improving early-stage design clarity and contextual anchoring.\n- Enhanced visual anti-pattern constraints, with explicit bans on zigzag layouts, repetitive eyebrows, fake screenshots, and repetitive section structures.\n- Updated the design \"Procedure\" to prioritize media authenticity, clear navigation, task-focused first screens, and adaptive page archetypes.\n- Expanded the \"验证设计结果\" (validation) to cover new anti-generic checks and device/user context requirements.\n- Removed outdated sample documentation file (skill-card.md).\n\nv2.5.0 | 2026-06-07T14:15:42.589Z | auto\n\n- Comprehensive rewrite of SKILL.md with deeper, step-by-step guidance for UI direction, systemization, hierarchy, and polish.\n- Clarifies when and how to use authoritative external design sources vs. generating new direction.\n- Adds structured, checklist-driven procedures for UI/UX QA, design-system generation, visual identity, and responsive behavior.\n- Expands on do's and don'ts for product-specific UI, anti-generic choices, and frontend polish across various page and product types.\n- Introduces detailed constraints to avoid common generic patterns and enforce context-sensitive, distinctive UI solutions.\n\nArchive index:\n\nArchive v2.9.0: 15 files, 29168 bytes\n\nFiles: data/product-rules.json (5566b), data/stack-ui-rules.json (2485b), data/style-archetypes.json (6113b), data/ux-quality-rules.json (4353b), LICENSE (1089b), metadata.json (2978b), package.json (1336b), README.md (1713b), references/design-intelligence.md (6614b), references/master-page-overrides.md (1441b), references/pre-delivery-checklist.md (2744b), scripts/design-system.mjs (11641b), skill-card.md (1818b), SKILL.md (13467b), _meta.json (132b)\n\nFile v2.9.0:SKILL.md\n\n---\nname: fec-ui-design\ndescription: Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or visual QA. Interface polishing, interactive state.\n---\n\n#UI design\n\nSuitable for UI tasks that require advancing the front-end interface to be \"in line with the product context, scannable, trustworthy, recognizable, and stable in details\". When systematic design suggestions are needed, load [design-intelligence.md](references/design-intelligence.md); when long-term precipitation of the design system is required, load [master-page-overrides.md](references/master-page-overrides.md); when doing UI/UX QA before going online, load [pre-delivery-checklist.md](references/pre-delivery-checklist.md).\n\nThe executable design system generator is located at [design-system.mjs](scripts/design-system.mjs), and its original knowledge package includes [product-rules.json](data/product-rules.json), [style-archetypes.json](data/style-archetypes.json), [ux-quality-rules.json](data/ux-quality-rules.json) and [stack-ui-rules.json](data/stack-ui-rules.json).\n\n## Purpose\n\nEstablish design direction for pages, components, dashboards and tool interfaces, and complete implementable visual and interactive polish.\n\n## Procedure\n\n1. Clarify the work of the interface\n   - Start by saying what task it helps the user accomplish, rather than choosing a color or layout first.\n   - Determine whether this is a daily high-frequency tool, marketing display, content reading, visual exploration, game, or configuration/management backend.\n   - If Figma, Sketch, MasterGo, Pixso, Ink Knife, Mockup or screenshots are the source of truth, give priority to restoring the design context and do not invent your own direction.\n\n2. Read the design context\n   - Before deciding on layout, colors, fonts, or motion, write out a line of design that reads: page type, target audience, primary mission, brand constraints, and sources of trustworthiness.\n   - Determine whether the current interface is a visual website, work/brand display, product marketing, tool workspace, data-intensive interface, mobile native process, or design draft restoration task.\n   - If the brief is clearly divergent, e.g. \"minimalist yet intensely experimental\", only ask a question that will change direction; otherwise make clear choices based on context.\n   - Regulated, public service, medical, financial, children, or strong accessibility scenarios prioritize stability, clarity, and recoverability without sacrificing usability for aesthetic adventures.\n\n3. Define aesthetic proposition\n   - Write out the target users, usage scenarios, sources of trustworthiness, and a visual anchor that will be remembered.\n   - Visual anchors can come from information structure, real media, data form, industry materials, font character, interaction rhythm or spatial organization, rather than empty decoration.\n   - Expression must serve the business context: tool-based interfaces focus on efficiency and stability, while display-based pages focus on subject recognition and memory points.\n   - Set design dials for page types: visual intensity, motion intensity, information density, media authenticity and content persuasiveness; these dials must change with the task, rather than sticking to the same set of templates.\n   - Tool-type and data-type interfaces increase information density and reduce decorative animation by default; marketing, portfolio and brand pages can increase visual tension, but still ensure that the first screen task, main body and CTA are visible.\n   - The design dial is used to constrain implementation choices: high visual tension does not equal chaotic typography, high dynamic intensity does not equal scroll hijacking, and high media authenticity does not equal piles of stock atmosphere images.\n\n4. Generate or read design system\n   - If the project does not yet have a design system, you can run `node skills/fec-ui-design/scripts/design-system.mjs \"<product audience tone>\" --project \"<name>\"` to generate suggestions.\n   - If reuse across sessions is required, use `--persist` to generate `design-system/<project>/MASTER.md`; use `--page <page>` to write page differences into `pages/<page>.md`.\n   - When building a specific page, read the page override first, and then read the Master; the page rules only cover the differences and do not copy the full design system.\n\n5. Establish above-the-fold and visual hierarchy\n   - Tool-based interface: The core workspace, list, table, canvas or editor is directly displayed on the first screen.\n   - Landing page: H1 uses the brand, product, place, name or clear category, and the value description is placed in the auxiliary copy.\n   - Product/Object page: The real product, object, status or checkable media must be visible on the first screen.\n   - The first screen should leave a clear memory point, but should not obscure core tasks, navigation and status feedback.\n   - Marketing and product pages need to clearly define the audience, pain points, commitments, evidence and action entry points; the copywriting structure serves conversion, but does not use exaggerated, empty or unverifiable claims.\n   - The first screen of a visual page cannot be just text, gradients and decorations; it needs real products, people, spaces, brand applications, data status or checkable generated assets to bear the main information.\n   - Navigation should remain single-line and highly restrained on desktop; CTA copy should be kept short and clear, and should not be replaced with multi-line buttons on desktop.\n\n6. Organize visual language\n   - Font: Give priority to using the project font system; if the task allows the establishment of a new direction, choose a title/text font combination that can express the character of the product and ensure readability.\n   - Color: Clarify the roles of primary, functional, neutral and accent colors to avoid using equal force on all elements.\n   - Space: Choose high-density, blank, asymmetric, column, canvas or editor layout according to the task, and do not apply fixed card templates.\n   - Motion effects: Only establish rhythm for page entry, hierarchical expansion, status confirmation, error feedback and key guidance, and respect `prefers-reduced-motion`.\n   - Media: Prioritize the use of real products, real states, real diagrams, checkable screenshots or locally generated assets; do not replace the main information with vague atmosphere images, placeholder URLs or irrelevant illustrations.\n   - Charts: First determine whether the data task is trend, comparison, composition, distribution or process, and then choose charts. Do not make all data into cards or pie charts.\n   - Visual reference: When there is no authoritative design draft and the visual quality of the page is the core goal, you can first generate or collect section-level reference images, and then extract the layout, hierarchy, color and media strategy from the images; do not compress the entire site into an unreadable long image.\n\n7. Align design systems, components and tokens\n   - First reuse the existing components, tokens, icon libraries, routing and layout conventions of the project.\n   - When tokens are missing, centrally complete them or record them clearly. Do not scatter hard coding in multiple components.\n   - Write out reused components, new components, responsive strategies and state overrides before implementing complex UI.\n   - The design system first defines semantic tokens, component APIs, state matrices and usage boundaries, and then falls to Tailwind, CSS Modules, component libraries or CSS variable implementations.\n   - Tailwind's special token, variant, dark mode and class management are offloaded to the Tailwind design system workflow; cross-device layout, container query and touch target are offloaded to the responsive layout workflow.\n   - The component API should distinguish between basic components, business components and page-private components; avoid letting a single `variant` bear semantic, size, density and permission implications at the same time.\n\n8. Polish geometry, text and states\n   - Nested fillets follow the optical relationship of \"the outer fillet is approximately equal to the inner fillet + spacing\".\n   - Asymmetric icons, play triangles, arrows, stars, etc. need to be fine-tuned according to the visual center.\n   - Titles and short text can use `text-wrap: balance` or `text-wrap: pretty`.\n   - Tables, prices, counters, and timers use `font-variant-numeric: tabular-nums`.\n   - The clickable area of the small control should be at least 40x40px, and 44x44px is preferred if space allows.\n   - focus ring is used for keyboard positioning, hover/active is used for mouse feedback, and disabled is not only expressed by transparency.\n   - Do not repeat the same three cards, stagger left and right, or have a large title with an explanatory paragraph on the right in multiple consecutive blocks; the layout of each block serves the specific information task of that block.\n   - The number of cells in the Bento and feature grid must be determined by the real content, and no empty cells are used to supplement the composition; multi-cell grids must at least have clear distinctions in primary and secondary, media or status.\n   - The small uppercase eyebrow should be used with restraint and not become a rhythm crutch for each block.\n\n9. Verify design results\n   - Check loading, empty, error, disabled, hover, focus, selected status.\n   - Check whether the copy text overflows or is blocked in mobile(375px), tablet(768px), desktop(1440px).\n   - For interfaces that rely on pictures, charts, canvases or 3D, confirm that the resources are truly rendered and bear the main information.\n   - Review whether there are traces of templates such as default purple gradients, empty heroes, card stacks, single hues, or non-contextual fonts.\n   - Check whether the first screen has task entrance, subject identification, credible evidence and content clues for the next screen; if only decoration is left, return to the information architecture and redo it.\n   - Complete hover, active, focus-visible, disabled, loading, selected, invalid and skeleton states for production-grade controls.\n   - Fatigue when checking scan paths, density, fixed sizes, and reuse for dashboards, tables, editors, and configuration tables.\n   - For marketing pages, portfolios and brand pages, check whether the first screen adapts to the height of common small notebooks, whether the navigation is single-line, and whether the CTA is qualified and does not wrap.\n   - Review whether there are more than three consecutive paragraphs with the same section structure, repeated zigzag, repeated three cards, cards within a card set, fake screenshots, or visual assets without main information.\n\n## Constraints\n\n- Do not turn tool-based applications into marketing landing pages; the home screen should be the available workspace.\n- No generic purple gradients, decorative flares, stacked cards, or empty heroes as the default scheme.\n- Don’t use thirds of feature cards, continuous zigzags, repeating eyebrows, fake product screenshots, or uncheckable media as the default page rhythm.\n- Don’t use context-free default fonts, uniform unfocused color palettes, repetitive rounded-corner cards, and templated two-column heroes as a substitute for real design judgment.\n- Do not put large cards inside cards; give priority to using full-width area or frameless layout for page partitions.\n- No visible copy is used to explain the functions that controls should express. Use icons and tooltips first for common actions.\n- Do not add large-area decorations, blurry spots, semantic-less gradients or irrelevant rewriting for the sake of texture.\n- Do not make the entire interface fall into a single hue in order to unify the style; colors should be hierarchical and semantically differentiated.\n- Do not regard the generator output as an unmodifiable design draft; it is the starting point for decision-making and must be corrected based on the existing components, tokens, user tasks and real data of the project.\n- No uncheckable remote placeholder images, generic stock mood images, or lorem copy as the delivery body; explicitly generate, produce, or degrade to real structured content when material is lacking.\n- Don't let visual polish ruin keyboard paths, touch targets, text readability, or low-end device performance.\n- Do not regard implementation vehicles such as Tailwind, component libraries, or Storybook documents as the design direction itself; they should inherit the already clear product context and token boundaries.\n- Do not force a framework, icon library, animation library or CSS tool to reference system preferences; always prioritize current project dependencies and design systems.\n\n## Expected Output\n\nThe output should include clear design direction, above-the-fold memo, visual language strategy, component/layout boundaries, state overrides, responsiveness strategy, and validation results. When reviewing, the interface should conform to the business context, the visual hierarchy should support fast scanning, the interaction status should be complete, and a generalized template feeling should be avoided.\n\nFile v2.9.0:README.md\n\n# UI design\n\nProduct-context UI direction with anti-generic design dials, distinctive visual identity, media strategy, interaction states, and visual QA.\n\n## Skill\n\n- ID: `fec-ui-design`\n- Category: `design-ui`\n- Version: `2.9.0`\n- Source: `skills/fec-ui-design/SKILL.md`\n\n## Description\n\nUse when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or visual QA. Interface polishing, interactive state.\n\n## Usage\n\nInstall or import this package with any skill runtime that understands the standard `SKILL.md` layout. The canonical source remains the Frontend Craft repository.\n\n## Packaged Files\n\n- [data/product-rules.json](data/product-rules.json)\n- [data/stack-ui-rules.json](data/stack-ui-rules.json)\n- [data/style-archetypes.json](data/style-archetypes.json)\n- [data/ux-quality-rules.json](data/ux-quality-rules.json)\n- [references/design-intelligence.md](references/design-intelligence.md)\n- [references/master-page-overrides.md](references/master-page-overrides.md)\n- [references/pre-delivery-checklist.md](references/pre-delivery-checklist.md)\n- [scripts/design-system.mjs](scripts/design-system.mjs)\n\n## Optional Related Packages\n\n- `@bovinphang/fec-image-generation`\n- `@bovinphang/fec-implement-from-design`\n- `@bovinphang/fec-accessibility-check`\n- `@bovinphang/fec-code-review`\n- `@bovinphang/fec-tailwind-design-system`\n- `@bovinphang/fec-responsive-layout`\n- `@bovinphang/fec-storybook-component-doc`\n- `@bovinphang/fec-web-video-presentation`\n\n## License\n\nMIT\n\nFile v2.9.0:_meta.json\n\n{\n  \"ownerId\": \"kn7b0nh7hvj1pffeqc8y0dqwwh83m726\",\n  \"slug\": \"fec-ui-design\",\n  \"version\": \"2.9.0\",\n  \"publishedAt\": 1790481163126\n}\n\nFile v2.9.0:references/design-intelligence.md\n\n#DesignSmartReference\n\nThis reference is used to turn obscure UI requests into an executable design system. Start by identifying the product category, then combine style archetypes, color roles, font moods, motion rhythms, graphic tasks, and UX risks.\n\n## Decision-making process\n\n1. Extract keywords: product type, users, scenarios, main tasks, content density, brand tone, technology stack.\n2. Write out the design reads: page type, audience, primary mission, brand constraints, and sources of trustworthiness.\n3. Match product rules: Select the closest category from `data/product-rules.json` and record the recommended structure, risks and anti-patterns.\n4. Select style archetypes: Select 1 main style and up to 1 auxiliary style from `data/style-archetypes.json` to avoid style collage.\n5. Set the design dial: visual tension, motion intensity, information density, media authenticity, and content persuasiveness are all expressed on a scale of 1-10, and vary with the page type.\n6. Establish token direction: define the semantic roles of main color, accent color, background, foreground, border, dangerous color and focus ring.\n7. Choose font mood: Don’t just choose a “good-looking font”, explain the tone and readability of the title and body text respectively.\n8. Judgment of data expression: Use polylines/areas for trends, columns for comparisons, donut charts to form a small number of categories, funnels/steps for processes, and tables must be retained for details.\n9. Output anti-patterns and quality gates: Every design suggestion must be accompanied by a “what not to do” and supplemented with above-the-fold, CTAs, media authenticity, section changes, and state integrity checks based on page type.\n\n## Direction Advisor\n\nWhen the user only says \"looks better\", \"give me some directions\", \"I don't know what style\" and there is no authoritative design draft, don't continue to ask general questions about taste. First, give 3 directions with obvious differences so that users can judge the choice.\n\nEach direction must contain:\n\n- Applicable scenarios: Why it is suitable for the current product, audience and task.\n- Visual anchors: information structure, real media, data form, material, font character, spatial organization or interaction rhythm.\n- Key tokens: main color, accent color, background, font mood, rounded corners/border/shadow tendency.\n- What to avoid: This is the easiest templating error to slip into.\n\nThe three directions should come from different design logics, such as:\n\n- Information architecture type: high-density, rational, data-first, suitable for B2B, operations, finance, and engineering tools.\n- Editorial narrative type: layout, white space, strong text hierarchy, suitable for brand stories, content products, and portfolios.\n- Product demonstration type: real screenshots, objects, status, and process evidence are given priority, suitable for SaaS, hardware, and developer tools.\n- Experimental expression: strong motion effect, sense of space, generative vision, suitable for release pages, event pages, and art/creative projects.\n- Warm and humanistic: low-offensive colors, approachable illustrations or real characters, suitable for education, health, and lifestyle.\n\nAfter the user chooses the direction, then implement it into the design system and page structure; do not collage the 3 directions into a mixed system.\n\n## Real assets take priority\n\nBrand or product related UI recognition comes from real assets, not color guesswork. Priority:\n\n1. Logo, product pictures, real UI screenshots, physical photos, and brand application pictures.\n2. The project already has icons, components, data status, charts and screenshots.\n3. Special assets generated for the current task.\n4. Clearly marked structured placeholder.\n\nDon’t use CSS outlines, generic illustrations, fake screenshots, or remote placeholder images to replace the subject that users need to identify. When there is a lack of key assets, first mark the asset gap and provide an alternative route; if the logo or main product is the core of first-screen recognition, confirmation should be suspended or changed to a structural plan that does not rely on brand recognition.\n\n## v0 calibration\n\nWhen the visual risk is high, the direction is unclear, or the page has a large impact, deliver a viewable v0 first instead of doing the entire page at once.\n\nv0 should contain:\n\n- Core layout, first screen hierarchy, main token and a key module.\n- Clarify placeholder and asset gaps.\n- 1-2 alternative direction points such as density, color temperature or media strategy.\n- Does not include the full state matrix, all content details, or production-grade animations.\n\nAfter v0 is passed, components, states, responsiveness and interactive effects will be completed.\n\n## Design Critique\n\nWhen users request to \"review the UI\", \"whether it looks good or not\", \"more advanced\" or a self-inspection is required before delivery, output specific questions in 5 dimensions instead of just giving subjective descriptions:\n\n- Directional consistency: Whether the visual choice serves the design read and product mission.\n- Hierarchy and scanning: Whether the first screen, title, CTA, data, and status are clearly prioritized.\n- Workmanship quality: spacing, alignment, number of colors, text wrapping, rounded corners/borders/shadows are stable.\n- Function completeness: whether loading, empty, error, disabled, hover, focus, and selected are covered.\n- Originality and recognition: whether to get rid of universal gradients, three cards, fake screenshots, and bodyless heroes.\n\nThe output should give executable fixes by severity, without judging the designers themselves.\n\n## When to run the generator\n\nGenerate design system recommendations using the following command:\n\n```bash\nnode skills/fec-ui-design/scripts/design-system.mjs \"beauty spa booking\" --project \"Serenity Spa\"\n```\n\nOutput Markdown is suitable for pasting into plans or PR descriptions; output JSON is suitable for testing or tool consumption:\n\n```bash\nnode skills/fec-ui-design/scripts/design-system.mjs \"fintech analytics dashboard\" --format json --stack next\n```\n\n## Output must answer\n\n- What is the main task of this interface?\n- What are the design reads and the five design dials?\n- What page structure or workspace structure is recommended?\n- What is a visual anchor and why does it fit the business?\n- What goals do the main style, font, color, and animation serve respectively?\n- How to deal with charts and data density?\n- What anti-patterns must be avoided?\n- What is the minimum QA checklist before going live?\n\nFile v2.9.0:references/master-page-overrides.md\n\n# Global/page level difference coverage\n\nWhen the project needs to maintain UI consistency for a long time, use `design-system/MASTER.md` to store the global design system, and use `design-system/pages/<page>.md` to store page-level differences.\n\n## Reading order\n\n1. First check whether the current page has `design-system/<project>/pages/<page>.md`.\n2. If it exists, the rules in the page file cover the same dimensions in the Master.\n3. If it does not exist, follow `design-system/<project>/MASTER.md` exactly.\n4. The page file only records differences and does not copy the full text of the Master.\n\n## Generate command\n\n```bash\nnode skills/fec-ui-design/scripts/design-system.mjs \"saas analytics dashboard\" --project \"Acme Console\" --persist --output-dir .\n```\n\nGenerate page overrides:\n\n```bash\nnode skills/fec-ui-design/scripts/design-system.mjs \"saas analytics dashboard\" --project \"Acme Console\" --page dashboard --persist --output-dir .\n```\n\n## Page override should contain\n\n- Differences in page tasks and information density\n- Layout differences: workspace, table, chart, form, detail page or marketing first screen\n- token difference: only write the semantic color, spacing, status or chart color that needs to be covered\n- Component differences: only write new or changed component behaviors on the current page\n- QA Focus: The current page’s most error-prone responsiveness, accessibility, performance, or interaction risks\n\nFile v2.9.0:references/pre-delivery-checklist.md\n\n# UI/UX pre-delivery inspection\n\n## Serious\n\n- Text contrast: at least 4.5:1 for main text and 3:1 for large fonts.\n- Keyboard accessible: menus, pop-up windows, tabs, drawers and custom controls can all be operated by the keyboard.\n- Focus visible: focus ring cannot be removed by global styles.\n- Icon button: must have an accessible name.\n- Touch targets: Primary interactions on mobile should be at least 44x44px; use 48px when space allows.\n\n## High priority\n\n- First screen: The tool-based interface directly displays the core workspace, without the need for marketing hero replacement functions.\n- Above the fold: Marketing, portfolio, and brand pages display body, CTA, and next-screen cues within common small notebook heights.\n- CTA: The button copy does not wrap on the desktop, the contrast is acceptable, and consistent labels are used for the same purpose.\n- Navigation: Keep a single line on the desktop, and the main path can still be reached after folding on the mobile version.\n- Responsive: 375px, 768px, 1024px, 1440px No horizontal overflow, occlusion or text truncation.\n- Performance: images have size or aspect-ratio; images below the first screen are lazy loaded; virtualization is used when the list is too large.\n- Animation: only animate transform/opacity, respecting `prefers-reduced-motion`.\n- Status: loading, empty, error, disabled, hover, focus, and selected are all designed.\n\n## Medium priority\n\n- Font: The main text should not be smaller than 16px; use tabular nums for numerical columns, amounts, and timers.\n- Color: Error, success, and warning are not only expressed by color.\n- Form: label is resident, errors are close to fields, and there will be loading/success/error after submission.\n- Navigation: The current route is identifiable, the return behavior is predictable, and deep pages can still return to the main path.\n- Charts: replaced by titles, units, legends, tooltips or detailed tables, and the colors do not rely on the distinction between red and green.\n\n## Anti-pattern\n\n- Use decorative light spots, purple gradients, and card stacks to cover up the lack of information structure.\n- Reuse three cards, left and right interleaving, split header or the same reveal animation for more than three consecutive paragraphs.\n- Visual pages have only text and gradients, no real products, real status, brand applications or inspectable media.\n- Bento uses empty grids to complete the composition, or feature grid. Each grid has the same weight, background, and rhythm.\n-Hover causes layout displacement.\n- `transition: all`、`will-change: all`。\n- Low-contrast gray text, meaningless transparency, and single-hue interface.\n- The empty status is only \"No data yet\" and there is no next action.\n\nFile v2.9.0:skill-card.md\n\n## Description:\n\nProvides product-specific frontend UI design direction, design-system guidance, and visual quality checks.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[bovinphang](https://clawhub.ai/user/bovinphang)\n\n### License/Terms of Use:\n\nMIT\n\n## Use Case:\n\nFrontend developers and designers use this skill to set product-appropriate visual direction, generate design-system recommendations, refine interaction states, and review UI quality.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Using --persist can create or overwrite generated Markdown under design-system/<project>.\n\nMitigation: Review the target output directory before enabling --persist and check generated files before adopting them.\n\n## Reference(s):\n\n- [Design intelligence](references/design-intelligence.md)\n- [Master and page overrides](references/master-page-overrides.md)\n- [Pre-delivery UI checklist](references/pre-delivery-checklist.md)\n- [Project homepage (package metadata)](https://github.com/bovinphang/frontend-craft)\n- [ClawHub skill release](https://clawhub.ai/bovinphang/skills/fec-ui-design)\n\n## Skill Output:\n\n**Output Type(s):** [Design guidance, Markdown, Code, Configuration guidance]\n\n**Output Format:** [Text and Markdown; optional generated design-system Markdown files]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [The optional --persist mode writes project and page design-system files.]\n\n## Skill Version(s):\n\n2.9.0 (source: ClawHub release and package.json)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nFile v2.9.0:data/product-rules.json\n\n[{\"id\":\"saas\",\"keywords\":[\"saas\",\"b2b\",\"subscription\",\"crm\",\"admin\",\"console\"],\"pattern\":\"Work-first dashboard with concise onboarding and persistent primary action\",\"style\":\"data-dense\",\"colorMood\":\"trustworthy neutrals with a clear action accent\",\"typographyMood\":\"professional, compact, readable\",\"motion\":\"quiet transitions for filters, drawers, and state changes\",\"chart\":\"stat cards plus line/bar charts for trends and comparisons\",\"risks\":[\"marketing hero replacing the workspace\",\"low-density cards hiding operational detail\"],\"antiPatterns\":[\"decorative gradients as primary structure\",\"unlabeled icon-only tools\"]},{\"id\":\"fintech\",\"keywords\":[\"fintech\",\"bank\",\"finance\",\"crypto\",\"wallet\",\"invoice\",\"billing\"],\"pattern\":\"Trust-first dashboard with balances, risk states, audit trail, and clear next actions\",\"style\":\"minimal\",\"colorMood\":\"stable blue/green neutrals with strict danger states\",\"typographyMood\":\"precise, numeric, high contrast\",\"motion\":\"subtle confirmation and risk feedback only\",\"chart\":\"time-series, comparison bars, and tabular details with export paths\",\"risks\":[\"playful visual language reducing trust\",\"color-only profit/loss communication\"],\"antiPatterns\":[\"neon cyber styling for serious finance\",\"ambiguous destructive actions\"]},{\"id\":\"healthcare\",\"keywords\":[\"health\",\"medical\",\"clinic\",\"dental\",\"pharmacy\",\"patient\",\"therapy\"],\"pattern\":\"Guided task flow with calm hierarchy, strong labels, and clear recovery paths\",\"style\":\"minimal\",\"colorMood\":\"calm accessible tones with clear warning and error roles\",\"typographyMood\":\"human, readable, low fatigue\",\"motion\":\"reassuring transitions, no surprise movement\",\"chart\":\"progress trends and summaries with plain-language explanations\",\"risks\":[\"low contrast calming palettes\",\"hidden labels in critical forms\"],\"antiPatterns\":[\"decorative medical imagery over task clarity\",\"tiny touch targets\"]},{\"id\":\"ecommerce\",\"keywords\":[\"shop\",\"store\",\"ecommerce\",\"marketplace\",\"cart\",\"checkout\",\"product\"],\"pattern\":\"Product-led browsing with strong media, filters, comparison, and checkout confidence\",\"style\":\"editorial\",\"colorMood\":\"brand-forward accents with neutral product surfaces\",\"typographyMood\":\"clear commerce hierarchy with readable prices\",\"motion\":\"fast hover/tap feedback and cart confirmation\",\"chart\":\"only for seller dashboards or comparison analytics\",\"risks\":[\"visual effects competing with product inspection\",\"unclear price/availability states\"],\"antiPatterns\":[\"cropped product media\",\"hidden shipping or error feedback\"]},{\"id\":\"creative\",\"keywords\":[\"portfolio\",\"agency\",\"studio\",\"creator\",\"photography\",\"editorial\"],\"pattern\":\"Portfolio-led narrative with memorable first viewport and selective case-study depth\",\"style\":\"editorial\",\"colorMood\":\"high-contrast neutrals with one expressive accent\",\"typographyMood\":\"distinctive display with restrained body\",\"motion\":\"purposeful reveals tied to content rhythm\",\"chart\":\"rare; use visual timelines or case metrics when needed\",\"risks\":[\"style overpowering work samples\",\"scroll theatrics blocking access\"],\"antiPatterns\":[\"generic split hero\",\"decorative mockups without real work\"]},{\"id\":\"wellness\",\"keywords\":[\"spa\",\"beauty\",\"wellness\",\"meditation\",\"fitness\",\"booking\",\"lifestyle\"],\"pattern\":\"Emotion-led service page with service clarity, trust proof, and low-friction booking\",\"style\":\"soft\",\"colorMood\":\"warm natural tones with a premium accent\",\"typographyMood\":\"calm, elegant, approachable\",\"motion\":\"gentle, short transitions with reduced-motion fallback\",\"chart\":\"habit streaks or progress charts only when product-led\",\"risks\":[\"pastel contrast failures\",\"luxury styling hiding booking details\"],\"antiPatterns\":[\"overly bright wellness gradients\",\"placeholder stock atmosphere\"]},{\"id\":\"education\",\"keywords\":[\"education\",\"learning\",\"course\",\"student\",\"school\",\"flashcard\"],\"pattern\":\"Learning path with progress, next task, feedback loops, and approachable empty states\",\"style\":\"bento\",\"colorMood\":\"encouraging accents with quiet surfaces\",\"typographyMood\":\"friendly, readable, structured\",\"motion\":\"reward moments and progress feedback, never distracting from reading\",\"chart\":\"progress, mastery, and completion summaries\",\"risks\":[\"gamification clutter\",\"unclear next lesson state\"],\"antiPatterns\":[\"dense dashboards for beginners\",\"reward animation blocking tasks\"]},{\"id\":\"gaming\",\"keywords\":[\"game\",\"gaming\",\"esports\",\"arcade\",\"quest\",\"leaderboard\"],\"pattern\":\"Immersive status-first interface with strong feedback and readable controls\",\"style\":\"immersive\",\"colorMood\":\"high-energy palette balanced by readable surfaces\",\"typographyMood\":\"expressive headings with legible UI text\",\"motion\":\"high feedback, strict performance budget\",\"chart\":\"leaderboards, comparisons, progression, and match history\",\"risks\":[\"motion overload\",\"stylized text reducing readability\"],\"antiPatterns\":[\"all-caps tiny labels\",\"animations that delay input\"]},{\"id\":\"data-dashboard\",\"keywords\":[\"dashboard\",\"analytics\",\"metrics\",\"kpi\",\"monitoring\",\"reporting\"],\"pattern\":\"Scan-first analytical workspace with filters, summaries, charts, and drill-down paths\",\"style\":\"data-dense\",\"colorMood\":\"semantic chart palette with restrained UI chrome\",\"typographyMood\":\"compact, tabular, legible\",\"motion\":\"state transitions only; no decorative chart animation by default\",\"chart\":\"match chart to question: trend, compare, composition, distribution, funnel, timeline\",\"risks\":[\"chart decoration hiding insight\",\"too many equal-weight cards\"],\"antiPatterns\":[\"pie charts for many categories\",\"color-only series distinction\"]}]\n\nFile v2.9.0:data/stack-ui-rules.json\n\n[{\"stack\":\"react\",\"keywords\":[\"react\",\"vite\",\"spa\"],\"guidance\":[\"Keep visual components pure and prop-driven\",\"Split expensive lists and charts\",\"Use existing component and token conventions before adding UI primitives\"]},{\"stack\":\"next\",\"keywords\":[\"next\",\"nextjs\",\"app router\"],\"guidance\":[\"Keep route shells and loading/error states explicit\",\"Prefer server components for static content and data shells\",\"Use client components only for interaction-heavy UI\"]},{\"stack\":\"vue\",\"keywords\":[\"vue\",\"vue3\"],\"guidance\":[\"Use scoped components and composables for view logic\",\"Keep Pinia/global state out of purely local UI state\",\"Preserve SFC style boundaries\"]},{\"stack\":\"nuxt\",\"keywords\":[\"nuxt\"],\"guidance\":[\"Use layouts for persistent UI chrome\",\"Align useFetch/useAsyncData states with loading and error UI\",\"Keep route middleware separate from component display logic\"]},{\"stack\":\"svelte\",\"keywords\":[\"svelte\"],\"guidance\":[\"Use component-local reactivity for UI state\",\"Keep transitions meaningful and reduced-motion aware\",\"Avoid global stores for local interaction state\"]},{\"stack\":\"astro\",\"keywords\":[\"astro\"],\"guidance\":[\"Use islands only where interaction is needed\",\"Keep marketing content fast and mostly static\",\"Prioritize image optimization and content hierarchy\"]},{\"stack\":\"angular\",\"keywords\":[\"angular\"],\"guidance\":[\"Prefer standalone components\",\"Keep templates declarative\",\"Use CDK/a11y patterns for overlays and focus\"]},{\"stack\":\"react-native\",\"keywords\":[\"react native\",\"rn\",\"mobile\"],\"guidance\":[\"Respect safe areas and platform gestures\",\"Use 44/48px touch targets\",\"Test dynamic type and screen reader labels\"]},{\"stack\":\"flutter\",\"keywords\":[\"flutter\"],\"guidance\":[\"Prefer composition with small widgets\",\"Use theme tokens instead of per-screen styles\",\"Respect platform text scaling and safe areas\"]},{\"stack\":\"threejs\",\"keywords\":[\"three\",\"threejs\",\"webgl\",\"3d\"],\"guidance\":[\"Make the primary scene full-bleed when it is the experience\",\"Provide DOM controls and accessible summaries\",\"Verify canvas is nonblank and resources dispose cleanly\"]},{\"stack\":\"shadcn\",\"keywords\":[\"shadcn\",\"tailwind\"],\"guidance\":[\"Use shadcn components as accessible primitives\",\"Map theme variables before custom styling\",\"Avoid arbitrary utility soup when a token exists\"]},{\"stack\":\"tailwind\",\"keywords\":[\"tailwind\",\"html\"],\"guidance\":[\"Keep mobile-first utilities\",\"Extract repeated class patterns into components\",\"Use semantic CSS variables for theme-critical color\"]}]\n\nFile v2.9.0:data/style-archetypes.json\n\n[{\"id\":\"minimal\",\"keywords\":[\"minimal\",\"clean\",\"enterprise\",\"trust\",\"calm\"],\"description\":\"Quiet surfaces, strong hierarchy, restrained accents, fast scanning.\",\"tokens\":{\"radius\":\"4-8px\",\"shadow\":\"low\",\"density\":\"medium-high\"},\"bestFor\":[\"enterprise\",\"finance\",\"healthcare\",\"documentation\"],\"avoid\":[\"empty white space without information priority\",\"low-contrast gray text\"]},{\"id\":\"editorial\",\"keywords\":[\"editorial\",\"magazine\",\"portfolio\",\"brand\",\"luxury\"],\"description\":\"Expressive typography, strong media, controlled asymmetry, narrative pacing.\",\"tokens\":{\"radius\":\"0-8px\",\"shadow\":\"content-dependent\",\"density\":\"medium\"},\"bestFor\":[\"creative\",\"ecommerce\",\"portfolio\",\"launch pages\"],\"avoid\":[\"decorative text that harms reading\",\"media that hides the actual product\"]},{\"id\":\"glass\",\"keywords\":[\"glass\",\"modern\",\"ai\",\"overlay\",\"depth\"],\"description\":\"Layered translucent surfaces used sparingly for hierarchy and focus.\",\"tokens\":{\"radius\":\"12-20px\",\"shadow\":\"soft depth\",\"density\":\"medium\"},\"bestFor\":[\"modern SaaS\",\"AI tools\",\"visualization\"],\"avoid\":[\"blurred low-contrast text\",\"using blur as pure decoration\"]},{\"id\":\"brutalist\",\"keywords\":[\"brutalist\",\"raw\",\"bold\",\"youth\",\"experimental\"],\"description\":\"Hard edges, bold contrast, visible structure, intentionally direct composition.\",\"tokens\":{\"radius\":\"0-4px\",\"shadow\":\"hard or none\",\"density\":\"variable\"},\"bestFor\":[\"creative campaigns\",\"youth brands\",\"experimental portfolios\"],\"avoid\":[\"serious regulated workflows\",\"inaccessible contrast or chaotic navigation\"]},{\"id\":\"bento\",\"keywords\":[\"bento\",\"cards\",\"modular\",\"features\",\"education\"],\"description\":\"Modular information blocks with varied scale and clear grouping.\",\"tokens\":{\"radius\":\"8px or less unless system differs\",\"shadow\":\"subtle\",\"density\":\"medium\"},\"bestFor\":[\"feature overviews\",\"learning paths\",\"product summaries\"],\"avoid\":[\"card-inside-card layouts\",\"equal-weight modules that hide priority\"]},{\"id\":\"data-dense\",\"keywords\":[\"dashboard\",\"analytics\",\"table\",\"monitoring\",\"dense\"],\"description\":\"Operational density, table/chart alignment, semantic color, stable controls.\",\"tokens\":{\"radius\":\"4-8px\",\"shadow\":\"minimal\",\"density\":\"high\"},\"bestFor\":[\"dashboards\",\"admin\",\"monitoring\",\"analytics\"],\"avoid\":[\"marketing hero screens\",\"large decorative cards\"]},{\"id\":\"immersive\",\"keywords\":[\"immersive\",\"game\",\"3d\",\"canvas\",\"story\",\"visualization\"],\"description\":\"Full-bleed visual space with controls that remain predictable and readable.\",\"tokens\":{\"radius\":\"contextual\",\"shadow\":\"scene-driven\",\"density\":\"low-medium\"},\"bestFor\":[\"games\",\"3D previews\",\"interactive visualization\"],\"avoid\":[\"framing the primary scene in a decorative card\",\"controls hidden by atmosphere\"]},{\"id\":\"mobile-native\",\"keywords\":[\"mobile\",\"app\",\"native\",\"touch\",\"safe-area\"],\"description\":\"Touch-first layout with platform-safe spacing, clear feedback, and resilient text scaling.\",\"tokens\":{\"radius\":\"platform-consistent\",\"shadow\":\"native elevation\",\"density\":\"touch-comfortable\"},\"bestFor\":[\"mobile apps\",\"responsive tools\",\"field workflows\"],\"avoid\":[\"hover-only behavior\",\"content behind safe areas\"]},{\"id\":\"soft\",\"keywords\":[\"soft\",\"wellness\",\"beauty\",\"calm\",\"organic\"],\"description\":\"Warm surfaces, gentle contrast, tactile spacing, and calm interaction rhythm.\",\"tokens\":{\"radius\":\"8-16px\",\"shadow\":\"soft\",\"density\":\"low-medium\"},\"bestFor\":[\"wellness\",\"beauty\",\"lifestyle\",\"care services\"],\"avoid\":[\"pastel contrast failures\",\"vague atmospheric imagery over real services\"]},{\"id\":\"editorial-premium\",\"keywords\":[\"premium\",\"luxury\",\"fashion\",\"magazine\",\"launch\",\"campaign\"],\"description\":\"Image-led composition, restrained copy, high-contrast typography, and deliberate negative space.\",\"tokens\":{\"radius\":\"0-8px\",\"shadow\":\"minimal\",\"density\":\"low-medium\"},\"bestFor\":[\"brand launches\",\"premium ecommerce\",\"editorial landing pages\",\"portfolio features\"],\"avoid\":[\"beige luxury defaults without brand evidence\",\"serif decoration that weakens readability\",\"hero copy that pushes the CTA below the first viewport\"]},{\"id\":\"industrial-brutalist\",\"keywords\":[\"industrial\",\"brutalist\",\"mechanical\",\"terminal\",\"tactical\",\"blueprint\"],\"description\":\"Visible grids, hard edges, strong type scale contrast, and utilitarian metadata used with clear purpose.\",\"tokens\":{\"radius\":\"0-2px\",\"shadow\":\"none\",\"density\":\"medium-high\"},\"bestFor\":[\"technical portfolios\",\"developer tools\",\"editorial experiments\",\"telemetry interfaces\"],\"avoid\":[\"regulated consumer flows\",\"tiny all-caps body copy\",\"decorative terminal chrome without real information\"]},{\"id\":\"minimal-utilitarian\",\"keywords\":[\"utilitarian\",\"document\",\"linear\",\"notion\",\"workspace\",\"minimalist\"],\"description\":\"Quiet document-like surfaces, precise structure, low ornament, and typography doing most of the hierarchy work.\",\"tokens\":{\"radius\":\"4-8px\",\"shadow\":\"none-low\",\"density\":\"medium\"},\"bestFor\":[\"SaaS settings\",\"docs\",\"team workspaces\",\"productivity tools\"],\"avoid\":[\"empty white expanses with no task priority\",\"low-contrast gray on gray\",\"identical flat cards for every section\"]},{\"id\":\"image-led-landing\",\"keywords\":[\"landing\",\"website\",\"hero\",\"visual\",\"image-led\",\"marketing\"],\"description\":\"A clear conversion path carried by real or generated media, varied section structure, and inspectable visual assets.\",\"tokens\":{\"radius\":\"contextual\",\"shadow\":\"media-dependent\",\"density\":\"low-medium\"},\"bestFor\":[\"marketing sites\",\"product pages\",\"event pages\",\"agency sites\"],\"avoid\":[\"text plus gradient-only hero\",\"fake screenshots\",\"repeating left-text/right-image sections\",\"CTA labels that wrap on desktop\"]},{\"id\":\"brand-system-board\",\"keywords\":[\"brand\",\"brandkit\",\"identity\",\"logo\",\"guidelines\",\"visual system\"],\"description\":\"Presentation-grid identity boards that show logo logic, palette, typography, applications, and visual world coherently.\",\"tokens\":{\"radius\":\"system-defined\",\"shadow\":\"presentation-dependent\",\"density\":\"medium\"},\"bestFor\":[\"brand exploration\",\"identity systems\",\"design direction handoff\",\"visual language proposals\"],\"avoid\":[\"random moodboards\",\"generic logos\",\"panels that do not explain the brand idea\"]}]\n\nFile v2.9.0:data/ux-quality-rules.json\n\n[{\"category\":\"accessibility\",\"priority\":\"critical\",\"checks\":[\"Text contrast meets WCAG AA\",\"Focus rings are visible\",\"Icon-only controls have names\",\"Keyboard order follows visual order\"],\"avoid\":[\"Removing outlines globally\",\"Color-only error or success states\"]},{\"category\":\"interaction\",\"priority\":\"critical\",\"checks\":[\"Primary controls respond within 100ms\",\"Touch targets are at least 44x44px\",\"Disabled states are semantic and visible\"],\"avoid\":[\"Hover-only primary actions\",\"Tap targets packed without spacing\"]},{\"category\":\"performance\",\"priority\":\"high\",\"checks\":[\"Images reserve dimensions\",\"Large lists are virtualized\",\"Animations use transform/opacity\",\"Heavy visual work is deferred or moved off main thread\"],\"avoid\":[\"Animating layout properties\",\"Unbounded chart or table rendering\"]},{\"category\":\"layout\",\"priority\":\"high\",\"checks\":[\"375/768/1024/1440px layouts are checked\",\"No horizontal overflow\",\"Fixed headers/footers reserve content space\"],\"avoid\":[\"Desktop-first max-width fixes\",\"Nested scroll regions without reason\"]},{\"category\":\"typography\",\"priority\":\"medium\",\"checks\":[\"Body text stays readable\",\"Line length is controlled\",\"Numbers use tabular figures where alignment matters\"],\"avoid\":[\"Tiny low-contrast labels\",\"Negative tracking on body text\"]},{\"category\":\"animation\",\"priority\":\"medium\",\"checks\":[\"Micro-interactions are 150-300ms\",\"Exit is faster than enter\",\"Reduced motion is respected\"],\"avoid\":[\"Decorative motion without cause\",\"Blocking input during transitions\"]},{\"category\":\"forms\",\"priority\":\"medium\",\"checks\":[\"Labels are persistent\",\"Errors appear near fields\",\"Submit has loading/success/error feedback\",\"First invalid field receives focus\"],\"avoid\":[\"Placeholder-only labels\",\"Error summary without field recovery\"]},{\"category\":\"navigation\",\"priority\":\"high\",\"checks\":[\"Current location is visible\",\"Back behavior preserves state\",\"Primary navigation remains reachable\"],\"avoid\":[\"Mixing multiple primary nav systems\",\"Using modals for primary navigation\"]},{\"category\":\"charts\",\"priority\":\"medium\",\"checks\":[\"Chart type matches data question\",\"Units and legends are visible\",\"Data has text/table fallback\",\"Color is supplemented by shape or labels\"],\"avoid\":[\"Pie charts for many categories\",\"Color-only series distinction\"]},{\"category\":\"first-viewport\",\"label\":\"First viewport\",\"priority\":\"high\",\"checks\":[\"Hero or workspace fits common laptop heights\",\"Primary CTA or task entry is visible without scrolling\",\"Desktop navigation stays on one line\",\"The next section leaves a readable cue when the page is promotional\"],\"avoid\":[\"Oversized top padding\",\"Hero copy pushing actions below the fold\",\"Two-line desktop nav\"]},{\"category\":\"cta-quality\",\"label\":\"CTA quality\",\"priority\":\"high\",\"checks\":[\"CTA text contrast meets WCAG AA\",\"Primary CTA label stays on one line at desktop\",\"Each CTA intent uses one consistent label\",\"Ghost buttons remain visible over media backgrounds\"],\"avoid\":[\"White text on light buttons\",\"Multiple contact labels for the same action\",\"Transparent buttons over busy imagery\"]},{\"category\":\"section-variety\",\"label\":\"Section variety\",\"priority\":\"medium\",\"checks\":[\"Adjacent sections use distinct layout jobs\",\"Bento cell count matches real content\",\"Feature grids have clear visual priority\",\"Small uppercase eyebrow labels are used sparingly\"],\"avoid\":[\"Three equal cards as the default rhythm\",\"Three or more zigzag sections in a row\",\"Empty bento cells for decoration\"]},{\"category\":\"media-authenticity\",\"label\":\"Media authenticity\",\"priority\":\"high\",\"checks\":[\"Visual pages use real or generated assets with a clear role\",\"Product pages show inspectable product or state\",\"Screenshots represent real UI or are labeled as concepts\",\"Images reserve aspect ratio and have meaningful alt text when informative\"],\"avoid\":[\"Text-only promotional pages\",\"Fake dashboard rectangles\",\"Blurred stock atmosphere as the main subject\"]},{\"category\":\"state-completeness\",\"label\":\"State completeness\",\"priority\":\"critical\",\"checks\":[\"Loading shape matches final layout\",\"Empty states include a useful next action\",\"Errors are recoverable and close to the source\",\"Selected, invalid, disabled, hover, focus, and reduced-motion states are covered\"],\"avoid\":[\"Generic spinners everywhere\",\"Empty states that only say no data\",\"Disabled controls communicated only by opacity\"]}]\n\nFile v2.9.0:metadata.json\n\n{\n  \"id\": \"fec-ui-design\",\n  \"name\": \"UI design\",\n  \"category\": \"design-ui\",\n  \"tags\": [\n    \"ui-design\",\n    \"visual-direction\",\n    \"visual-identity\",\n    \"ui-polish\",\n    \"anti-generic\",\n    \"anti-generic-ui\",\n    \"design-dials\",\n    \"visual-qa\",\n    \"design-system\",\n    \"industry-ui\",\n    \"chart-ux\"\n  ],\n  \"summary\": \"Product-context UI direction with anti-generic design dials, distinctive visual identity, media strategy, interaction states, and visual QA.\",\n  \"version\": \"2.9.0\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/bovinphang/frontend-craft\",\n  \"repository\": \"https://github.com/bovinphang/frontend-craft\",\n  \"keywords\": [\n    \"design-ui\",\n    \"ui-design\",\n    \"visual-direction\",\n    \"visual-identity\",\n    \"ui-polish\",\n    \"anti-generic\",\n    \"anti-generic-ui\",\n    \"design-dials\",\n    \"visual-qa\",\n    \"design-system\",\n    \"industry-ui\",\n    \"chart-ux\",\n    \"design-system-generation\",\n    \"industry-specific-ui\",\n    \"master-page-overrides\"\n  ],\n  \"platforms\": [\n    \"skills-cli\",\n    \"skillreg\",\n    \"claude-code\",\n    \"codex\",\n    \"cursor\",\n    \"opencode\",\n    \"openclaw\",\n    \"generic-skill-runtime\"\n  ],\n  \"description\": \"Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or visual QA. Interface polishing, interactive state.\",\n  \"source\": \"skills/fec-ui-design\",\n  \"references\": [\n    \"data/product-rules.json\",\n    \"data/stack-ui-rules.json\",\n    \"data/style-archetypes.json\",\n    \"data/ux-quality-rules.json\",\n    \"references/design-intelligence.md\",\n    \"references/master-page-overrides.md\",\n    \"references/pre-delivery-checklist.md\",\n    \"scripts/design-system.mjs\"\n  ],\n  \"relations\": {\n    \"relatedSkills\": [\n      \"fec-image-generation\",\n      \"fec-implement-from-design\",\n      \"fec-accessibility-check\",\n      \"fec-code-review\",\n      \"fec-tailwind-design-system\",\n      \"fec-responsive-layout\",\n      \"fec-storybook-component-doc\",\n      \"fec-web-video-presentation\"\n    ],\n    \"boundaryWorkflows\": [\n      \"Use an implementation-from-design workflow when an external design file is the source of truth.\",\n      \"Use an accessibility workflow for keyboard, focus, ARIA, semantic structure, and contrast checks.\",\n      \"Use a code review workflow when UI issues cross architecture, types, rendering performance, and maintainability.\",\n      \"Use generated design-system recommendations as direction only; external design files, project tokens, and shipped component APIs remain authoritative.\"\n    ],\n    \"capabilityTags\": [\n      \"ui-design\",\n      \"design-direction\",\n      \"design-system\",\n      \"master-page-overrides\",\n      \"industry-ui\",\n      \"visual-identity\",\n      \"ui-polish\",\n      \"anti-generic\",\n      \"visual-qa\",\n      \"chart-ux\",\n      \"accessibility\"\n    ]\n  }\n}\n\nArchive v2.7.0: 14 files, 29234 bytes\n\nFiles: data/product-rules.json (6228b), data/stack-ui-rules.json (2642b), data/style-archetypes.json (6919b), data/ux-quality-rules.json (4860b), metadata.json (3164b), package.json (1522b), README.md (1899b), references/design-intelligence.md (5402b), references/master-page-overrides.md (1231b), references/pre-delivery-checklist.md (2175b), scripts/design-system.mjs (11641b), skill-card.md (2437b), SKILL.md (10836b), _meta.json (132b)\n\nFile v2.7.0:SKILL.md\n\n---\nname: fec-ui-design\ndescription: Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or visual QA. When an external design file is authoritative, implement from that source instead of inventing direction; Chinese triggers include UI 设计, 设计系统, 视觉风格, 不要模板化, 高级感, 界面打磨, 交互状态.\n---\n\n# UI 设计\n\n适用于需要把前端界面推进到“符合产品语境、可扫描、可信赖、有辨识度，并且细节稳定”的 UI 任务。需要系统化设计建议时，加载 [design-intelligence.md](references/design-intelligence.md)；需要长期沉淀设计系统时，加载 [master-page-overrides.md](references/master-page-overrides.md)；上线前做 UI/UX QA 时，加载 [pre-delivery-checklist.md](references/pre-delivery-checklist.md)。\n\n可执行设计系统生成器位于 [design-system.mjs](scripts/design-system.mjs)，其原创知识包包括 [product-rules.json](data/product-rules.json)、[style-archetypes.json](data/style-archetypes.json)、[ux-quality-rules.json](data/ux-quality-rules.json) 和 [stack-ui-rules.json](data/stack-ui-rules.json)。\n\n## Purpose\n\n为页面、组件、仪表盘和工具界面建立设计方向，并完成可落地的视觉与交互 polish。\n\n## Procedure\n\n1. 明确界面的工作\n   - 先说清它帮助用户完成什么任务，而不是先选颜色或布局。\n   - 判断这是日常高频工具、营销展示、内容阅读、可视化探索、游戏，还是配置/管理后台。\n   - 如果已有 Figma、Sketch、MasterGo、Pixso、墨刀、摹客或截图是事实来源，优先还原设计上下文，不自行发明方向。\n\n2. 读取设计语境\n   - 在决定布局、色彩、字体或动效前，先写出一行设计读取：页面类型、目标受众、主要任务、品牌约束和可信赖感来源。\n   - 判断当前界面是视觉型网站、作品/品牌展示、产品营销、工具工作区、数据密集界面、移动原生流程，还是设计稿还原任务。\n   - 如果 brief 有明显分歧，例如“极简但强烈实验性”，只问一个会改变方向的问题；否则基于上下文做出明确选择。\n   - 受监管、公共服务、医疗、金融、儿童或强可访问性场景优先稳定、清晰和可恢复，不为审美冒险牺牲可用性。\n\n3. 定义审美主张\n   - 写出目标用户、使用场景、可信赖感来源和一个可被记住的视觉锚点。\n   - 视觉锚点可以来自信息结构、真实媒体、数据形态、行业材质、字体性格、交互节奏或空间组织，而不是空泛装饰。\n   - 表现力必须服务业务语境：工具型界面重效率和稳定，展示型页面重主体识别和记忆点。\n   - 为页面类型设定设计拨盘：视觉张力、动效强度、信息密度、媒体真实性和内容说服力；这些拨盘必须随任务变化，而不是沿用同一套模板。\n   - 工具型和数据型界面默认提高信息密度、降低装饰动效；营销、作品集和品牌页可以提高视觉张力，但仍要保证首屏任务、主体和 CTA 可见。\n   - 设计拨盘用于约束实现选择：高视觉张力不等于混乱排版，高动效强度不等于滚动劫持，高媒体真实性不等于堆 stock 氛围图。\n\n4. 生成或读取设计系统\n   - 若项目还没有设计系统，可运行 `node skills/fec-ui-design/scripts/design-system.mjs \"<product audience tone>\" --project \"<name>\"` 生成建议。\n   - 若需要跨会话复用，使用 `--persist` 生成 `design-system/<project>/MASTER.md`；页面差异用 `--page <page>` 写入 `pages/<page>.md`。\n   - 构建具体页面时先读页面 override，再读 Master；页面规则只覆盖差异，不复制全量设计系统。\n\n5. 建立首屏与视觉层级\n   - 工具型界面：首屏直接呈现核心工作区、列表、表格、画布或编辑器。\n   - 落地页：H1 使用品牌、产品、地点、人名或明确品类，价值说明放在辅助文案。\n   - 产品/对象页：首屏必须可见真实产品、对象、状态或可检查媒体。\n   - 首屏应留下一个明确记忆点，但不能遮挡核心任务、导航和状态反馈。\n   - 营销和产品页需要先写清受众、痛点、承诺、证据和行动入口；文案结构服务转化，但不使用夸张、空泛或不可验证的声明。\n   - 视觉型页面的首屏不能只是文字、渐变和装饰物；需要真实产品、人物、空间、品牌应用、数据状态或可检查的生成资产承担主体信息。\n   - 导航在桌面端应保持单行且高度克制；CTA 文案保持短而清楚，桌面端不应换成多行按钮。\n\n6. 组织视觉语言\n   - 字体：优先沿用项目字体体系；若任务允许建立新方向，选择能表达产品性格的标题/正文字体组合，并保证可读性。\n   - 色彩：明确主色、功能色、中性色和强调色的角色，避免所有元素平均用力。\n   - 空间：根据任务选择高密度、留白、非对称、分栏、画布式或编辑器式布局，不套用固定卡片模板。\n   - 动效：只为页面入场、层级展开、状态确认、错误反馈和重点引导建立节奏，并尊重 `prefers-reduced-motion`。\n   - 媒体：优先使用真实产品、真实状态、真实图表、可检查截图或本地生成资产；不要用模糊氛围图、占位 URL 或无关插画替代主体信息。\n   - 图表：先判断数据任务是趋势、比较、构成、分布还是流程，再选择图表，不把所有数据都做成卡片或饼图。\n   - 视觉参考：没有权威设计稿且页面视觉质量是核心目标时，可先生成或收集分区级参考图，再从图中提取布局、层级、色彩和媒体策略；不要把整站压成一个不可读长图。\n\n7. 对齐设计系统、组件与 token\n   - 先复用项目已有组件、token、图标库、路由和布局约定。\n   - 缺少 token 时集中补齐或明确记录，不要在多个组件里散落硬编码。\n   - 复杂 UI 在实现前写出复用组件、新建组件、响应式策略和状态覆盖。\n   - 设计系统先定义语义 token、组件 API、状态矩阵和使用边界，再落到 Tailwind、CSS Modules、组件库或 CSS 变量实现。\n   - Tailwind 专项 token、variant、dark mode 和 class 治理分流到 Tailwind 设计系统工作流；跨设备布局、容器查询和触摸目标分流到响应式布局工作流。\n   - 组件 API 应区分基础组件、业务组件和页面私有组件；避免让单个 `variant` 同时承担语义、尺寸、密度和权限含义。\n\n8. 打磨几何、文本和状态\n   - 嵌套圆角遵循“外层圆角约等于内层圆角 + 间距”的光学关系。\n   - 非对称图标、播放三角、箭头、星标等需要按视觉中心微调。\n   - 标题和短文本可使用 `text-wrap: balance` 或 `text-wrap: pretty`。\n   - 表格、价格、计数器、计时器使用 `font-variant-numeric: tabular-nums`。\n   - 小控件点击区域至少 40x40px，空间允许时优先 44x44px。\n   - focus ring 用于键盘定位，hover/active 用于鼠标反馈，disabled 不只靠透明度表达。\n   - 不在连续多个区块重复同一种三卡片、左右交错或大标题加右侧说明段落；每个区块的布局服务该区块的具体信息任务。\n   - Bento 和 feature grid 的格子数量必须由真实内容决定，不用空格子补构图；多格网格至少有明确主次、媒体或状态差异。\n   - 小型 uppercase eyebrow 要克制使用，不能成为每个区块的节奏拐杖。\n\n9. 验证设计结果\n   - 检查 loading、empty、error、disabled、hover、focus、selected 状态。\n   - 在 mobile(375px)、tablet(768px)、desktop(1440px) 检查文案是否溢出或遮挡。\n   - 对依赖图片、图表、画布或 3D 的界面，确认资源真实渲染且承担主体信息。\n   - 复核是否存在默认紫色渐变、空泛 hero、卡片堆叠、单一色相或无语境字体等模板化痕迹。\n   - 检查首屏是否同时具备任务入口、主体识别、可信证据和下一屏内容线索；若只剩装饰，应回到信息架构重做。\n   - 对生产级控件补齐 hover、active、focus-visible、disabled、loading、selected、invalid 和 skeleton 状态。\n   - 对仪表盘、表格、编辑器和配置台检查扫描路径、密度、固定尺寸和重复使用时的疲劳感。\n   - 对营销页、作品集和品牌页检查首屏是否适配常见小笔记本高度，导航是否单行，CTA 是否对比合格且不换行。\n   - 复核是否存在连续三段以上相同 section 结构、重复 zigzag、重复三卡片、卡片套卡片、假截图或没有主体信息的视觉资产。\n\n## Constraints\n\n- 不把工具型应用做成营销落地页；首屏应是可用工作区。\n- 不用通用紫色渐变、装饰光斑、堆叠卡片或空泛 hero 作为默认方案。\n- 不用三等分 feature cards、连续 zigzag、重复 eyebrow、假产品截图或不可检查媒体作为默认页面节奏。\n- 不使用无语境默认字体、均匀无重点配色、重复圆角卡片和模板化双栏 hero 来替代真实设计判断。\n- 不在卡片里再套大卡片；页面分区优先用全宽区域或无框布局。\n- 不用可见文案解释控件本该表达的功能，常见动作优先用图标和 tooltip。\n- 不为了质感添加大面积装饰、模糊光斑、无语义渐变或无关重写。\n- 不为了统一风格让整个界面落入单一色相；颜色应有层次和语义区分。\n- 不把生成器输出当成不可修改的设计稿；它是决策起点，必须结合项目已有组件、token、用户任务和真实数据校正。\n- 不用不可检查的远程占位图、通用 stock 氛围图或 lorem 文案作为交付主体；缺素材时明确生成、制作或降级为真实结构化内容。\n- 不让视觉 polish 破坏键盘路径、触摸目标、文本可读性或低端设备性能。\n- 不把 Tailwind、组件库或 Storybook 文档等实现载体当成设计方向本身；它们应承接已经明确的产品语境和 token 边界。\n- 不因参考系统偏好而强制某个框架、图标库、动效库或 CSS 工具；始终优先遵循当前项目依赖和设计系统。\n\n## Expected Output\n\n输出应包含明确的设计方向、首屏记忆点、视觉语言策略、组件/布局边界、状态覆盖、响应式策略和验证结果。复核时界面应符合业务语境、视觉层级支持快速扫描、交互状态完整，并避免泛化模板感。\n\nFile v2.7.0:README.md\n\n# UI 设计\n\nProduct-context UI direction with anti-generic design dials, distinctive visual identity, media strategy, interaction states, and visual QA.\n\n## Skill\n\n- ID: `fec-ui-design`\n- Category: `design-ui`\n- Version: `2.7.0`\n- Source: `skills/fec-ui-design/SKILL.md`\n\n## Description\n\nUse when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or visual QA. When an external design file is authoritative, implement from that source instead of inventing direction; Chinese triggers include UI 设计, 设计系统, 视觉风格, 不要模板化, 高级感, 界面打磨, 交互状态.\n\n## Usage\n\nInstall or import this package with any skill runtime that understands the standard `SKILL.md` layout. The canonical source remains the Frontend Craft repository.\n\n## Packaged Files\n\n- [data/product-rules.json](data/product-rules.json)\n- [data/stack-ui-rules.json](data/stack-ui-rules.json)\n- [data/style-archetypes.json](data/style-archetypes.json)\n- [data/ux-quality-rules.json](data/ux-quality-rules.json)\n- [references/design-intelligence.md](references/design-intelligence.md)\n- [references/master-page-overrides.md](references/master-page-overrides.md)\n- [references/pre-delivery-checklist.md](references/pre-delivery-checklist.md)\n- [scripts/design-system.mjs](scripts/design-system.mjs)\n\n## Optional Related Packages\n\n- `@bovinphang/fec-image-generation`\n- `@bovinphang/fec-implement-from-design`\n- `@bovinphang/fec-accessibility-check`\n- `@bovinphang/fec-code-review`\n- `@bovinphang/fec-tailwind-design-system`\n- `@bovinphang/fec-responsive-layout`\n- `@bovinphang/fec-storybook-component-doc`\n- `@bovinphang/fec-web-video-presentation`\n\n## License\n\nMIT\n\nFile v2.7.0:_meta.json\n\n{\n  \"ownerId\": \"kn7b0nh7hvj1pffeqc8y0dqwwh83m726\",\n  \"slug\": \"fec-ui-design\",\n  \"version\": \"2.7.0\",\n  \"publishedAt\": 1781143705772\n}\n\nFile v2.7.0:references/design-intelligence.md\n\n# 设计智能参考\n\n本参考用于把模糊的 UI 请求转成可执行设计系统。先识别产品类别，再组合风格原型、色彩角色、字体情绪、动效节奏、图表任务和 UX 风险。\n\n## 决策流程\n\n1. 提取关键词：产品类型、用户、场景、主要任务、内容密度、品牌语气、技术栈。\n2. 写出设计读取：页面类型、受众、主任务、品牌约束和可信赖感来源。\n3. 匹配产品规则：从 `data/product-rules.json` 选择最接近的类别，记录推荐结构、风险和反模式。\n4. 选择风格原型：从 `data/style-archetypes.json` 选择 1 个主风格和最多 1 个辅助风格，避免风格拼贴。\n5. 设定设计拨盘：视觉张力、动效强度、信息密度、媒体真实性、内容说服力都用 1-10 表达，并随页面类型变化。\n6. 建立 token 方向：定义主色、强调色、背景、前景、边框、危险色和 focus ring 的语义角色。\n7. 选择字体情绪：不要只选“好看的字体”，要说明标题和正文各自承担的语气与可读性。\n8. 判断数据表达：趋势用折线/面积，比较用柱状，构成少量类别可用环图，流程用漏斗/步骤，明细必须保留表格替代。\n9. 输出反模式和质量门禁：每个设计建议必须附带“不要做什么”，并根据页面类型补充首屏、CTA、媒体真实性、section 变化和状态完整度检查。\n\n## 方向 Advisor\n\n当用户只说“好看一点”“给几个方向”“我也不知道什么风格”且没有权威设计稿时，不要连续追问泛泛口味问题。先给 3 个差异明显的方向，让用户能判断取舍。\n\n每个方向必须包含：\n\n- 适用场景：为什么适合当前产品、受众和任务。\n- 视觉锚点：信息结构、真实媒体、数据形态、材质、字体性格、空间组织或交互节奏。\n- 关键 token：主色、强调色、背景、字体情绪、圆角/边框/阴影倾向。\n- 避免项：这个方向最容易滑向的模板化错误。\n\n三个方向应来自不同设计逻辑，例如：\n\n- 信息架构型：高密度、理性、数据优先，适合 B2B、运营、金融、工程工具。\n- 编辑叙事型：版式、留白、强文字层级，适合品牌故事、内容产品、作品集。\n- 产品实证型：真实截图、对象、状态、流程证据优先，适合 SaaS、硬件、开发者工具。\n- 表现实验型：强动效、空间感、生成视觉，适合发布页、活动页、艺术/创意项目。\n- 温暖人本型：低攻击性色彩、可亲近插画或真实人物，适合教育、健康、生活方式。\n\n用户选择方向后，再把它落成设计系统和页面结构；不要把 3 个方向拼贴成一个混杂系统。\n\n## 真实资产优先\n\n品牌或产品相关 UI 的识别度来自真实资产，而不是颜色猜测。优先级：\n\n1. Logo、产品图、真实 UI 截图、实体照片、品牌应用图。\n2. 项目内已有 icon、组件、数据状态、图表和截图。\n3. 为当前任务生成的专用资产。\n4. 明确标记的结构化 placeholder。\n\n不要用 CSS 轮廓、通用插画、假截图或远程占位图替代用户需要识别的主体。缺少关键资产时，先标记资产缺口并给替代路线；若 logo 或主体产品是首屏识别核心，应暂停确认或改为不依赖品牌识别的结构方案。\n\n## v0 校准\n\n视觉风险高、方向不明确或页面影响面较大时，先交付一个可看的 v0，而不是一次性做完整页面。\n\nv0 应包含：\n\n- 核心布局、首屏层级、主要 token 和一个关键模块。\n- 明确 placeholder 和资产缺口。\n- 1-2 个可替换方向点，例如密度、色彩温度或媒体策略。\n- 不包含完整状态矩阵、所有内容细节或生产级动效。\n\nv0 通过后再补齐组件、状态、响应式和交互动效。\n\n## 设计 Critique\n\n当用户要求“评审 UI”“好不好看”“再高级一点”或交付前需要自检时，按 5 个维度输出具体问题，而不是只给主观形容：\n\n- 方向一致性：视觉选择是否服务设计读取和产品任务。\n- 层级与扫描：首屏、标题、CTA、数据、状态是否有清楚主次。\n- 工艺质量：间距、对齐、色彩数量、文字换行、圆角/边框/阴影是否稳定。\n- 功能完整度：loading、empty、error、disabled、hover、focus、selected 是否覆盖。\n- 原创性与识别度：是否摆脱通用渐变、三卡片、假截图、无主体 hero。\n\n输出应按严重程度给出可执行修复，不评价设计者本人。\n\n## 何时运行生成器\n\n使用以下命令生成设计系统建议：\n\n```bash\nnode skills/fec-ui-design/scripts/design-system.mjs \"beauty spa booking\" --project \"Serenity Spa\"\n```\n\n输出 Markdown 适合贴入计划或 PR 描述；输出 JSON 适合测试或工具消费：\n\n```bash\nnode skills/fec-ui-design/scripts/design-system.mjs \"fintech analytics dashboard\" --format json --stack next\n```\n\n## 输出必须回答\n\n- 这个界面的主任务是什么？\n- 设计读取和五个设计拨盘分别是什么？\n- 推荐哪种页面结构或工作区结构？\n- 视觉锚点是什么，为什么贴合业务？\n- 主风格、字体、色彩、动效分别服务什么目标？\n- 图表和数据密度如何处理？\n- 哪些反模式必须避免？\n- 上线前最小 QA 清单是什么？\n\nFile v2.7.0:references/master-page-overrides.md\n\n# 全局/页面级差异覆盖\n\n当项目需要长期保持 UI 一致性时，用 `design-system/MASTER.md` 存放全局设计系统，用 `design-system/pages/<page>.md` 存放页面级差异。\n\n## 读取顺序\n\n1. 先检查当前页面是否有 `design-system/<project>/pages/<page>.md`。\n2. 如果存在，页面文件里的规则覆盖 Master 中相同维度。\n3. 如果不存在，完全遵循 `design-system/<project>/MASTER.md`。\n4. 页面文件只记录差异，不复制 Master 全文。\n\n## 生成命令\n\n```bash\nnode skills/fec-ui-design/scripts/design-system.mjs \"saas analytics dashboard\" --project \"Acme Console\" --persist --output-dir .\n```\n\n生成页面 overrides：\n\n```bash\nnode skills/fec-ui-design/scripts/design-system.mjs \"saas analytics dashboard\" --project \"Acme Console\" --page dashboard --persist --output-dir .\n```\n\n## 页面 override 应包含\n\n- 页面任务和信息密度差异\n- 布局差异：工作区、表格、图表、表单、详情页或营销首屏\n- token 差异：只写需要覆盖的语义色、间距、状态或图表色\n- 组件差异：只写当前页面新增或改变的组件行为\n- QA 焦点：当前页面最容易出错的响应式、可访问性、性能或交互风险\n\nFile v2.7.0:references/pre-delivery-checklist.md\n\n# UI/UX 交付前检查\n\n## 严重\n\n- 文本对比度：正文至少 4.5:1，大字号至少 3:1。\n- 键盘可达：菜单、弹窗、标签页、抽屉和自定义控件都能键盘操作。\n- 焦点可见：focus ring 不能被全局样式移除。\n- 图标按钮：必须有可访问名称。\n- 触摸目标：移动端主要交互至少 44x44px；空间允许时使用 48px。\n\n## 高优先级\n\n- 首屏：工具型界面直接展示核心工作区，不用营销 hero 替代功能。\n- 首屏：营销、作品集和品牌页在常见小笔记本高度内显示主体、CTA 和下一屏线索。\n- CTA：按钮文案在桌面端不换行，对比度合格，同一意图使用一致标签。\n- 导航：桌面端保持单行，移动端折叠后仍能到达主要路径。\n- 响应式：375px、768px、1024px、1440px 无水平溢出、遮挡或文本截断。\n- 性能：图片有尺寸或 aspect-ratio；非首屏图片懒加载；列表过大时虚拟化。\n- 动效：只动画 transform/opacity，尊重 `prefers-reduced-motion`。\n- 状态：loading、empty、error、disabled、hover、focus、selected 都有设计。\n\n## 中优先级\n\n- 字体：正文不小于 16px；数字列、金额、计时器使用 tabular nums。\n- 颜色：错误、成功、警告不只靠颜色表达。\n- 表单：label 常驻，错误靠近字段，提交后有 loading/success/error。\n- 导航：当前路由可识别，返回行为可预测，深层页面仍能回到主路径。\n- 图表：有标题、单位、图例、tooltip 或明细表替代，色彩不依赖红绿区分。\n\n## 反模式\n\n- 用装饰光斑、紫色渐变、卡片堆叠掩盖信息结构不足。\n- 连续三段以上复用三卡片、左右交错、split header 或同一种 reveal 动效。\n- 视觉型页面只有文字和渐变，没有真实产品、真实状态、品牌应用或可检查媒体。\n- Bento 用空格子补构图，或 feature grid 每个格子同权重、同背景、同节奏。\n- hover 导致布局位移。\n- `transition: all`、`will-change: all`。\n- 低对比灰字、无意义透明度、单一色相界面。\n- 空状态只有“暂无数据”，没有下一步动作。\n\nFile v2.7.0:skill-card.md\n\n## Description:\n\nProvides product-context frontend UI design guidance, design-system direction, Master/Page overrides, visual polish, responsive behavior checks, chart UX guidance, interaction states, and visual QA.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[bovinphang](https://clawhub.ai/user/bovinphang)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers, product engineers, and design-focused agents use this skill to plan, review, or improve frontend interfaces with product-specific visual direction, design-system choices, interaction states, responsive behavior, and pre-delivery UI/UX checks.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The optional --persist mode creates design-system notes in the selected output directory.\n\nMitigation: Review the command and output directory before using --persist; run without --persist for advisory output only.\n\nRisk: UI design guidance may conflict with an authoritative external design file, existing project tokens, or shipped component APIs.\n\nMitigation: Treat external design files, existing design systems, project tokens, component APIs, and accessibility checks as authoritative.\n\n## Reference(s):\n\n- [ClawHub Skill Page](https://clawhub.ai/bovinphang/skills/fec-ui-design)\n- [README](README.md)\n- [Design Intelligence](references/design-intelligence.md)\n- [Master/Page Overrides](references/master-page-overrides.md)\n- [Pre-Delivery Checklist](references/pre-delivery-checklist.md)\n- [Product Rules Catalog](data/product-rules.json)\n- [Style Archetypes Catalog](data/style-archetypes.json)\n- [UX Quality Rules Catalog](data/ux-quality-rules.json)\n- [Stack UI Rules Catalog](data/stack-ui-rules.json)\n\n## Skill Output:\n\n**Output Type(s):** [guidance, markdown, code, shell commands, configuration]\n\n**Output Format:** [Markdown guidance, optional JSON design-system recommendations, and shell commands]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May write design-system Markdown files only when --persist is explicitly used.]\n\n## Skill Version(s):\n\n2.7.0 (source: server release metadata and package.json)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nFile v2.7.0:data/product-rules.json\n\n[\n  {\n    \"id\": \"saas\",\n    \"keywords\": [\"saas\", \"b2b\", \"subscription\", \"crm\", \"admin\", \"console\"],\n    \"pattern\": \"Work-first dashboard with concise onboarding and persistent primary action\",\n    \"style\": \"data-dense\",\n    \"colorMood\": \"trustworthy neutrals with a clear action accent\",\n    \"typographyMood\": \"professional, compact, readable\",\n    \"motion\": \"quiet transitions for filters, drawers, and state changes\",\n    \"chart\": \"stat cards plus line/bar charts for trends and comparisons\",\n    \"risks\": [\"marketing hero replacing the workspace\", \"low-density cards hiding operational detail\"],\n    \"antiPatterns\": [\"decorative gradients as primary structure\", \"unlabeled icon-only tools\"]\n  },\n  {\n    \"id\": \"fintech\",\n    \"keywords\": [\"fintech\", \"bank\", \"finance\", \"crypto\", \"wallet\", \"invoice\", \"billing\"],\n    \"pattern\": \"Trust-first dashboard with balances, risk states, audit trail, and clear next actions\",\n    \"style\": \"minimal\",\n    \"colorMood\": \"stable blue/green neutrals with strict danger states\",\n    \"typographyMood\": \"precise, numeric, high contrast\",\n    \"motion\": \"subtle confirmation and risk feedback only\",\n    \"chart\": \"time-series, comparison bars, and tabular details with export paths\",\n    \"risks\": [\"playful visual language reducing trust\", \"color-only profit/loss communication\"],\n    \"antiPatterns\": [\"neon cyber styling for serious finance\", \"ambiguous destructive actions\"]\n  },\n  {\n    \"id\": \"healthcare\",\n    \"keywords\": [\"health\", \"medical\", \"clinic\", \"dental\", \"pharmacy\", \"patient\", \"therapy\"],\n    \"pattern\": \"Guided task flow with calm hierarchy, strong labels, and clear recovery paths\",\n    \"style\": \"minimal\",\n    \"colorMood\": \"calm accessible tones with clear warning and error roles\",\n    \"typographyMood\": \"human, readable, low fatigue\",\n    \"motion\": \"reassuring transitions, no surprise movement\",\n    \"chart\": \"progress trends and summaries with plain-language explanations\",\n    \"risks\": [\"low contrast calming palettes\", \"hidden labels in critical forms\"],\n    \"antiPatterns\": [\"decorative medical imagery over task clarity\", \"tiny touch targets\"]\n  },\n  {\n    \"id\": \"ecommerce\",\n    \"keywords\": [\"shop\", \"store\", \"ecommerce\", \"marketplace\", \"cart\", \"checkout\", \"product\"],\n    \"pattern\": \"Product-led browsing with strong media, filters, comparison, and checkout confidence\",\n    \"style\": \"editorial\",\n    \"colorMood\": \"brand-forward accents with neutral product surfaces\",\n    \"typographyMood\": \"clear commerce hierarchy with readable prices\",\n    \"motion\": \"fast hover/tap feedback and cart confirmation\",\n    \"chart\": \"only for seller dashboards or comparison analytics\",\n    \"risks\": [\"visual effects competing with product inspection\", \"unclear price/availability states\"],\n    \"antiPatterns\": [\"cropped product media\", \"hidden shipping or error feedback\"]\n  },\n  {\n    \"id\": \"creative\",\n    \"keywords\": [\"portfolio\", \"agency\", \"studio\", \"creator\", \"photography\", \"editorial\"],\n    \"pattern\": \"Portfolio-led narrative with memorable first viewport and selective case-study depth\",\n    \"style\": \"editorial\",\n    \"colorMood\": \"high-contrast neutrals with one expressive accent\",\n    \"typographyMood\": \"distinctive display with restrained body\",\n    \"motion\": \"purposeful reveals tied to content rhythm\",\n    \"chart\": \"rare; use visual timelines or case metrics when needed\",\n    \"risks\": [\"style overpowering work samples\", \"scroll theatrics blocking access\"],\n    \"antiPatterns\": [\"generic split hero\", \"decorative mockups without real work\"]\n  },\n  {\n    \"id\": \"wellness\",\n    \"keywords\": [\"spa\", \"beauty\", \"wellness\", \"meditation\", \"fitness\", \"booking\", \"lifestyle\"],\n    \"pattern\": \"Emotion-led service page with service clarity, trust proof, and low-friction booking\",\n    \"style\": \"soft\",\n    \"colorMood\": \"warm natural tones with a premium accent\",\n    \"typographyMood\": \"calm, elegant, approachable\",\n    \"motion\": \"gentle, short transitions with reduced-motion fallback\",\n    \"chart\": \"habit streaks or progress charts only when product-led\",\n    \"risks\": [\"pastel contrast failures\", \"luxury styling hiding booking details\"],\n    \"antiPatterns\": [\"overly bright wellness gradients\", \"placeholder stock atmosphere\"]\n  },\n  {\n    \"id\": \"education\",\n    \"keywords\": [\"education\", \"learning\", \"course\", \"student\", \"school\", \"flashcard\"],\n    \"pattern\": \"Learning path with progress, next task, feedback loops, and approachable empty states\",\n    \"style\": \"bento\",\n    \"colorMood\": \"encouraging accents with quiet surfaces\",\n    \"typographyMood\": \"friendly, readable, structured\",\n    \"motion\": \"reward moments and progress feedback, never distracting from reading\",\n    \"chart\": \"progress, mastery, and completion summaries\",\n    \"risks\": [\"gamification clutter\", \"unclear next lesson state\"],\n    \"antiPatterns\": [\"dense dashboards for beginners\", \"reward animation blocking tasks\"]\n  },\n  {\n    \"id\": \"gaming\",\n    \"keywords\": [\"game\", \"gaming\", \"esports\", \"arcade\", \"quest\", \"leaderboard\"],\n    \"pattern\": \"Immersive status-first interface with strong feedback and readable controls\",\n    \"style\": \"immersive\",\n    \"colorMood\": \"high-energy palette balanced by readable surfaces\",\n    \"typographyMood\": \"expressive headings with legible UI text\",\n    \"motion\": \"high feedback, strict performance budget\",\n    \"chart\": \"leaderboards, comparisons, progression, and match history\",\n    \"risks\": [\"motion overload\", \"stylized text reducing readability\"],\n    \"antiPatterns\": [\"all-caps tiny labels\", \"animations that delay input\"]\n  },\n  {\n    \"id\": \"data-dashboard\",\n    \"keywords\": [\"dashboard\", \"analytics\", \"metrics\", \"kpi\", \"monitoring\", \"reporting\"],\n    \"pattern\": \"Scan-first analytical workspace with filters, summaries, charts, and drill-down paths\",\n    \"style\": \"data-dense\",\n    \"colorMood\": \"semantic chart palette with restrained UI chrome\",\n    \"typographyMood\": \"compact, tabular, legible\",\n    \"motion\": \"state transitions only; no decorative chart animation by default\",\n    \"chart\": \"match chart to question: trend, compare, composition, distribution, funnel, timeline\",\n    \"risks\": [\"chart decoration hiding insight\", \"too many equal-weight cards\"],\n    \"antiPatterns\": [\"pie charts for many categories\", \"color-only series distinction\"]\n  }\n]\n\nFile v2.7.0:data/stack-ui-rules.json\n\n[\n  { \"stack\": \"react\", \"keywords\": [\"react\", \"vite\", \"spa\"], \"guidance\": [\"Keep visual components pure and prop-driven\", \"Split expensive lists and charts\", \"Use existing component and token conventions before adding UI primitives\"] },\n  { \"stack\": \"next\", \"keywords\": [\"next\", \"nextjs\", \"app router\"], \"guidance\": [\"Keep route shells and loading/error states explicit\", \"Prefer server components for static content and data shells\", \"Use client components only for interaction-heavy UI\"] },\n  { \"stack\": \"vue\", \"keywords\": [\"vue\", \"vue3\"], \"guidance\": [\"Use scoped components and composables for view logic\", \"Keep Pinia/global state out of purely local UI state\", \"Preserve SFC style boundaries\"] },\n  { \"stack\": \"nuxt\", \"keywords\": [\"nuxt\"], \"guidance\": [\"Use layouts for persistent UI chrome\", \"Align useFetch/useAsyncData states with loading and error UI\", \"Keep route middleware separate from component display logic\"] },\n  { \"stack\": \"svelte\", \"keywords\": [\"svelte\"], \"guidance\": [\"Use component-local reactivity for UI state\", \"Keep transitions meaningful and reduced-motion aware\", \"Avoid global stores for local interaction state\"] },\n  { \"stack\": \"astro\", \"keywords\": [\"astro\"], \"guidance\": [\"Use islands only where interaction is needed\", \"Keep marketing content fast and mostly static\", \"Prioritize image optimization and content hierarchy\"] },\n  { \"stack\": \"angular\", \"keywords\": [\"angular\"], \"guidance\": [\"Prefer standalone components\", \"Keep templates declarative\", \"Use CDK/a11y patterns for overlays and focus\"] },\n  { \"stack\": \"react-native\", \"keywords\": [\"react native\", \"rn\", \"mobile\"], \"guidance\": [\"Respect safe areas and platform gestures\", \"Use 44/48px touch targets\", \"Test dynamic type and screen reader labels\"] },\n  { \"stack\": \"flutter\", \"keywords\": [\"flutter\"], \"guidance\": [\"Prefer composition with small widgets\", \"Use theme tokens instead of per-screen styles\", \"Respect platform text scaling and safe areas\"] },\n  { \"stack\": \"threejs\", \"keywords\": [\"three\", \"threejs\", \"webgl\", \"3d\"], \"guidance\": [\"Make the primary scene full-bleed when it is the experience\", \"Provide DOM controls and accessible summaries\", \"Verify canvas is nonblank and resources dispose cleanly\"] },\n  { \"stack\": \"shadcn\", \"keywords\": [\"shadcn\", \"tailwind\"], \"guidance\": [\"Use shadcn components as accessible primitives\", \"Map theme variables before custom styling\", \"Avoid arbitrary utility soup when a token exists\"] },\n  { \"stack\": \"tailwind\", \"keywords\": [\"tailwind\", \"html\"], \"guidance\": [\"Keep mobile-first utilities\", \"Extract repeated class patterns into components\", \"Use semantic CSS variables for theme-critical color\"] }\n]\n\nFile v2.7.0:data/style-archetypes.json\n\n[\n  {\n    \"id\": \"minimal\",\n    \"keywords\": [\"minimal\", \"clean\", \"enterprise\", \"trust\", \"calm\"],\n    \"description\": \"Quiet surfaces, strong hierarchy, restrained accents, fast scanning.\",\n    \"tokens\": { \"radius\": \"4-8px\", \"shadow\": \"low\", \"density\": \"medium-high\" },\n    \"bestFor\": [\"enterprise\", \"finance\", \"healthcare\", \"documentation\"],\n    \"avoid\": [\"empty white space without information priority\", \"low-contrast gray text\"]\n  },\n  {\n    \"id\": \"editorial\",\n    \"keywords\": [\"editorial\", \"magazine\", \"portfolio\", \"brand\", \"luxury\"],\n    \"description\": \"Expressive typography, strong media, controlled asymmetry, narrative pacing.\",\n    \"tokens\": { \"radius\": \"0-8px\", \"shadow\": \"content-dependent\", \"density\": \"medium\" },\n    \"bestFor\": [\"creative\", \"ecommerce\", \"portfolio\", \"launch pages\"],\n    \"avoid\": [\"decorative text that harms reading\", \"media that hides the actual product\"]\n  },\n  {\n    \"id\": \"glass\",\n    \"keywords\": [\"glass\", \"modern\", \"ai\", \"overlay\", \"depth\"],\n    \"description\": \"Layered translucent surfaces used sparingly for hierarchy and focus.\",\n    \"tokens\": { \"radius\": \"12-20px\", \"shadow\": \"soft depth\", \"density\": \"medium\" },\n    \"bestFor\": [\"modern SaaS\", \"AI tools\", \"visualization\"],\n    \"avoid\": [\"blurred low-contrast text\", \"using blur as pure decoration\"]\n  },\n  {\n    \"id\": \"brutalist\",\n    \"keywords\": [\"brutalist\", \"raw\", \"bold\", \"youth\", \"experimental\"],\n    \"description\": \"Hard edges, bold contrast, visible structure, intentionally direct composition.\",\n    \"tokens\": { \"radius\": \"0-4px\", \"shadow\": \"hard or none\", \"density\": \"variable\" },\n    \"bestFor\": [\"creative campaigns\", \"youth brands\", \"experimental portfolios\"],\n    \"avoid\": [\"serious regulated workflows\", \"inaccessible contrast or chaotic navigation\"]\n  },\n  {\n    \"id\": \"bento\",\n    \"keywords\": [\"bento\", \"cards\", \"modular\", \"features\", \"education\"],\n    \"description\": \"Modular information blocks with varied scale and clear grouping.\",\n    \"tokens\": { \"radius\": \"8px or less unless system differs\", \"shadow\": \"subtle\", \"density\": \"medium\" },\n    \"bestFor\": [\"feature overviews\", \"learning paths\", \"product summaries\"],\n    \"avoid\": [\"card-inside-card layouts\", \"equal-weight modules that hide priority\"]\n  },\n  {\n    \"id\": \"data-dense\",\n    \"keywords\": [\"dashboard\", \"analytics\", \"table\", \"monitoring\", \"dense\"],\n    \"description\": \"Operational density, table/chart alignment, semantic color, stable controls.\",\n    \"tokens\": { \"radius\": \"4-8px\", \"shadow\": \"minimal\", \"density\": \"high\" },\n    \"bestFor\": [\"dashboards\", \"admin\", \"monitoring\", \"analytics\"],\n    \"avoid\": [\"marketing hero screens\", \"large decorative cards\"]\n  },\n  {\n    \"id\": \"immersive\",\n    \"keywords\": [\"immersive\", \"game\", \"3d\", \"canvas\", \"story\", \"visualization\"],\n    \"description\": \"Full-bleed visual space with controls that remain predictable and readable.\",\n    \"tokens\": { \"radius\": \"contextual\", \"shadow\": \"scene-driven\", \"density\": \"low-medium\" },\n    \"bestFor\": [\"games\", \"3D previews\", \"interactive visualization\"],\n    \"avoid\": [\"framing the primary scene in a decorative card\", \"controls hidden by atmosphere\"]\n  },\n  {\n    \"id\": \"mobile-native\",\n    \"keywords\": [\"mobile\", \"app\", \"native\", \"touch\", \"safe-area\"],\n    \"description\": \"Touch-first layout with platform-safe spacing, clear feedback, and resilient text scaling.\",\n    \"tokens\": { \"radius\": \"platform-consistent\", \"shadow\": \"native elevation\", \"density\": \"touch-comfortable\" },\n    \"bestFor\": [\"mobile apps\", \"responsive tools\", \"field workflows\"],\n    \"avoid\": [\"hover-only behavior\", \"content behind safe areas\"]\n  },\n  {\n    \"id\": \"soft\",\n    \"keywords\": [\"soft\", \"wellness\", \"beauty\", \"calm\", \"organic\"],\n    \"description\": \"Warm surfaces, gentle contrast, tactile spacing, and calm interaction rhythm.\",\n    \"tokens\": { \"radius\": \"8-16px\", \"shadow\": \"soft\", \"density\": \"low-medium\" },\n    \"bestFor\": [\"wellness\", \"beauty\", \"lifestyle\", \"care services\"],\n    \"avoid\": [\"pastel contrast failures\", \"vague atmospheric imagery over real services\"]\n  },\n  {\n    \"id\": \"editorial-premium\",\n    \"keywords\": [\"premium\", \"luxury\", \"fashion\", \"magazine\", \"launch\", \"campaign\"],\n    \"description\": \"Image-led composition, restrained copy, high-contrast typography, and deliberate negative space.\",\n    \"tokens\": { \"radius\": \"0-8px\", \"shadow\": \"minimal\", \"density\": \"low-medium\" },\n    \"bestFor\": [\"brand launches\", \"premium ecommerce\", \"editorial landing pages\", \"portfolio features\"],\n    \"avoid\": [\"beige luxury defaults without brand evidence\", \"serif decoration that weakens readability\", \"hero copy that pushes the CTA below the first viewport\"]\n  },\n  {\n    \"id\": \"industrial-brutalist\",\n    \"keywords\": [\"industrial\", \"brutalist\", \"mechanical\", \"terminal\", \"tactical\", \"blueprint\"],\n    \"description\": \"Visible grids, hard edges, strong type scale contrast, and utilitarian metadata used with clear purpose.\",\n    \"tokens\": { \"radius\": \"0-2px\", \"shadow\": \"none\", \"density\": \"medium-high\" },\n    \"bestFor\": [\"technical portfolios\", \"developer tools\", \"editorial experiments\", \"telemetry interfaces\"],\n    \"avoid\": [\"regulated consumer flows\", \"tiny all-caps body copy\", \"decorative terminal chrome without real information\"]\n  },\n  {\n    \"id\": \"minimal-utilitarian\",\n    \"keywords\": [\"utilitarian\", \"document\", \"linear\", \"notion\", \"workspace\", \"minimalist\"],\n    \"description\": \"Quiet document-like surfaces, precise structure, low ornament, and typography doing most of the hierarchy work.\",\n    \"tokens\": { \"radius\": \"4-8px\", \"shadow\": \"none-low\", \"density\": \"medium\" },\n    \"bestFor\": [\"SaaS settings\", \"docs\", \"team workspaces\", \"productivity tools\"],\n    \"avoid\": [\"empty white expanses with no task priority\", \"low-contrast gray on gray\", \"identical flat cards for every section\"]\n  },\n  {\n    \"id\": \"image-led-landing\",\n    \"keywords\": [\"landing\", \"website\", \"hero\", \"visual\", \"image-led\", \"marketing\"],\n    \"description\": \"A clear conversion path carried by real or generated media, varied section structure, and inspectable visual assets.\",\n    \"tokens\": { \"radius\": \"contextual\", \"shadow\": \"media-dependent\", \"density\": \"low-medium\" },\n    \"bestFor\": [\"marketing sites\", \"product pages\", \"event pages\", \"agency sites\"],\n    \"avoid\": [\"text plus gradient-only hero\", \"fake screenshots\", \"repeating left-text/right-image sections\", \"CTA labels that wrap on desktop\"]\n  },\n  {\n    \"id\": \"brand-system-board\",\n    \"keywords\": [\"brand\", \"brandkit\", \"identity\", \"logo\", \"guidelines\", \"visual system\"],\n    \"description\": \"Presentation-grid identity boards that show logo logic, palette, typography, applications, and visual world coherently.\",\n    \"tokens\": { \"radius\": \"system-defined\", \"shadow\": \"presentation-dependent\", \"density\": \"medium\" },\n    \"bestFor\": [\"brand exploration\", \"identity systems\", \"design direction handoff\", \"visual language proposals\"],\n    \"avoid\": [\"random moodboards\", \"generic logos\", \"panels that do not explain the brand idea\"]\n  }\n]\n\nFile v2.7.0:data/ux-quality-rules.json\n\n[\n  {\n    \"category\": \"accessibility\",\n    \"priority\": \"critical\",\n    \"checks\": [\"Text contrast meets WCAG AA\", \"Focus rings are visible\", \"Icon-only controls have names\", \"Keyboard order follows visual order\"],\n    \"avoid\": [\"Removing outlines globally\", \"Color-only error or success states\"]\n  },\n  {\n    \"category\": \"interaction\",\n    \"priority\": \"critical\",\n    \"checks\": [\"Primary controls respond within 100ms\", \"Touch targets are at least 44x44px\", \"Disabled states are semantic and visible\"],\n    \"avoid\": [\"Hover-only primary actions\", \"Tap targets packed without spacing\"]\n  },\n  {\n    \"category\": \"performance\",\n    \"priority\": \"high\",\n    \"checks\": [\"Images reserve dimensions\", \"Large lists are virtualized\", \"Animations use transform/opacity\", \"Heavy visual work is deferred or moved off main thread\"],\n    \"avoid\": [\"Animating layout properties\", \"Unbounded chart or table rendering\"]\n  },\n  {\n    \"category\": \"layout\",\n    \"priority\": \"high\",\n    \"checks\": [\"375/768/1024/1440px layouts are checked\", \"No horizontal overflow\", \"Fixed headers/footers reserve content space\"],\n    \"avoid\": [\"Desktop-first max-width fixes\", \"Nested scroll regions without reason\"]\n  },\n  {\n    \"category\": \"typography\",\n    \"priority\": \"medium\",\n    \"checks\": [\"Body text stays readable\", \"Line length is controlled\", \"Numbers use tabular figures where alignment matters\"],\n    \"avoid\": [\"Tiny low-contrast labels\", \"Negative tracking on body text\"]\n  },\n  {\n    \"category\": \"animation\",\n    \"priority\": \"medium\",\n    \"checks\": [\"Micro-interactions are 150-300ms\", \"Exit is faster than enter\", \"Reduced motion is respected\"],\n    \"avoid\": [\"Decorative motion without cause\", \"Blocking input during transitions\"]\n  },\n  {\n    \"category\": \"forms\",\n    \"priority\": \"medium\",\n    \"checks\": [\"Labels are persistent\", \"Errors appear near fields\", \"Submit has loading/success/error feedback\", \"First invalid field receives focus\"],\n    \"avoid\": [\"Placeholder-only labels\", \"Error summary without field recovery\"]\n  },\n  {\n    \"category\": \"navigation\",\n    \"priority\": \"high\",\n    \"checks\": [\"Current location is visible\", \"Back behavior preserves state\", \"Primary navigation remains reachable\"],\n    \"avoid\": [\"Mixing multiple primary nav systems\", \"Using modals for primary navigation\"]\n  },\n  {\n    \"category\": \"charts\",\n    \"priority\": \"medium\",\n    \"checks\": [\"Chart type matches data question\", \"Units and legends are visible\", \"Data has text/table fallback\", \"Color is supplemented by shape or labels\"],\n    \"avoid\": [\"Pie charts for many categories\", \"Color-only series distinction\"]\n  },\n  {\n    \"category\": \"first-viewport\",\n    \"label\": \"First viewport\",\n    \"priority\": \"high\",\n    \"checks\": [\"Hero or workspace fits common laptop heights\", \"Primary CTA or task entry is visible without scrolling\", \"Desktop navigation stays on one line\", \"The next section leaves a readable cue when the page is promotional\"],\n    \"avoid\": [\"Oversized top padding\", \"Hero copy pushing actions below the fold\", \"Two-line desktop nav\"]\n  },\n  {\n    \"category\": \"cta-quality\",\n    \"label\": \"CTA quality\",\n    \"priority\": \"high\",\n    \"checks\": [\"CTA text contrast meets WCAG AA\", \"Primary CTA label stays on one line at desktop\", \"Each CTA intent uses one consistent label\", \"Ghost buttons remain visible over media backgrounds\"],\n    \"avoid\": [\"White text on light buttons\", \"Multiple contact labels for the same action\", \"Transparent buttons over busy imagery\"]\n  },\n  {\n    \"category\": \"section-variety\",\n    \"label\": \"Section variety\",\n    \"priority\": \"medium\",\n    \"checks\": [\"Adjacent sections use distinct layout jobs\", \"Bento cell count matches real content\", \"Feature grids have clear visual priority\", \"Small uppercase eyebrow labels are used sparingly\"],\n    \"avoid\": [\"Three equal cards as the default rhythm\", \"Three or more zigzag sections in a row\", \"Empty bento cells for decoration\"]\n  },\n  {\n    \"category\": \"media-authenticity\",\n    \"label\": \"Media authenticity\",\n    \"priority\": \"high\",\n    \"checks\": [\"Visual pages use real or generated assets with a clear role\", \"Product pages show inspectable product or state\", \"Screenshots represent real UI or are labeled as concepts\", \"Images reserve aspect ratio and have meaningful alt text when informative\"],\n    \"avoid\": [\"Text-only promotional pages\", \"Fake dashboard rectangles\", \"Blurred stock atmosphere as the main subject\"]\n  },\n  {\n    \"category\": \"state-completeness\",\n    \"label\": \"State completeness\",\n    \"priority\": \"critical\",\n    \"checks\": [\"Loading shape matches final layout\", \"Empty states include a useful next action\", \"Errors are recoverable and close to the source\", \"Selected, invalid, disabled, hover, focus, and reduced-motion states are covered\"],\n    \"avoid\": [\"Generic spinners everywhere\", \"Empty states that only say no data\", \"Disabled controls communicated only by opacity\"]\n  }\n]\n\nFile v2.7.0:metadata.json\n\n{\n  \"id\": \"fec-ui-design\",\n  \"name\": \"UI 设计\",\n  \"category\": \"design-ui\",\n  \"tags\": [\n    \"ui-design\",\n    \"visual-direction\",\n    \"visual-identity\",\n    \"ui-polish\",\n    \"anti-generic\",\n    \"anti-generic-ui\",\n    \"design-dials\",\n    \"visual-qa\",\n    \"design-system\",\n    \"industry-ui\",\n    \"chart-ux\"\n  ],\n  \"summary\": \"Product-context UI direction with anti-generic design dials, distinctive visual identity, media strategy, interaction states, and visual QA.\",\n  \"version\": \"2.7.0\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/bovinphang/frontend-craft\",\n  \"repository\": \"https://github.com/bovinphang/frontend-craft\",\n  \"keywords\": [\n    \"design-ui\",\n    \"ui-design\",\n    \"visual-direction\",\n    \"visual-identity\",\n    \"ui-polish\",\n    \"anti-generic\",\n    \"anti-generic-ui\",\n    \"design-dials\",\n    \"visual-qa\",\n    \"design-system\",\n    \"industry-ui\",\n    \"chart-ux\",\n    \"design-system-generation\",\n    \"industry-specific-ui\",\n    \"master-page-overrides\"\n  ],\n  \"platforms\": [\n    \"skills-cli\",\n    \"skillreg\",\n    \"claude-code\",\n    \"codex\",\n    \"cursor\",\n    \"opencode\",\n    \"openclaw\",\n    \"generic-skill-runtime\"\n  ],\n  \"description\": \"Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or visual QA. When an external design file is authoritative, implement from that source instead of inventing direction; Chinese triggers include UI 设计, 设计系统, 视觉风格, 不要模板化, 高级感, 界面打磨, 交互状态.\",\n  \"source\": \"skills/fec-ui-design\",\n  \"references\": [\n    \"data/product-rules.json\",\n    \"data/stack-ui-rules.json\",\n    \"data/style-archetypes.json\",\n    \"data/ux-quality-rules.json\",\n    \"references/design-intelligence.md\",\n    \"references/master-page-overrides.md\",\n    \"references/pre-delivery-checklist.md\",\n    \"scripts/design-system.mjs\"\n  ],\n  \"relations\": {\n    \"relatedSkills\": [\n      \"fec-image-generation\",\n      \"fec-implement-from-design\",\n      \"fec-accessibility-check\",\n      \"fec-code-review\",\n      \"fec-tailwind-design-system\",\n      \"fec-responsive-layout\",\n      \"fec-storybook-component-doc\",\n      \"fec-web-video-presentation\"\n    ],\n    \"boundaryWorkflows\": [\n      \"Use an implementation-from-design workflow when an external design file is the source of truth.\",\n      \"Use an accessibility workflow for keyboard, focus, ARIA, semantic structure, and contrast checks.\",\n      \"Use a code review workflow when UI issues cross architecture, types, rendering performance, and maintainability.\",\n      \"Use generated design-system recommendations as direction only; external design files, project tokens, and shipped component APIs remain authoritative.\"\n    ],\n    \"capabilityTags\": [\n      \"ui-design\",\n      \"design-direction\",\n      \"design-system\",\n      \"master-page-overrides\",\n      \"industry-ui\",\n      \"visual-identity\",\n      \"ui-polish\",\n      \"anti-generic\",\n      \"visual-qa\",\n      \"chart-ux\",\n      \"accessibility\"\n    ]\n  }\n}\n\nArchive v2.5.0: 14 files, 23459 bytes\n\nFiles: data/product-rules.json (6228b), data/stack-ui-rules.json (2642b), data/style-archetypes.json (4005b), data/ux-quality-rules.json (2588b), metadata.json (2990b), package.json (1479b), README.md (1797b), references/design-intelligence.md (1840b), references/master-page-overrides.md (1231b), references/pre-delivery-checklist.md (1581b), scripts/design-system.mjs (9111b), skill-card.md (2775b), SKILL.md (8254b), _meta.json (132b)\n\nFile v2.5.0:SKILL.md\n\n---\nname: fec-ui-design\ndescription: Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or visual QA. When an external design file is authoritative, implement from that source instead of inventing direction; Chinese triggers include UI 设计, 设计系统, 视觉风格, 不要模板化, 高级感, 界面打磨, 交互状态.\n---\n\n# UI 设计\n\n适用于需要把前端界面推进到“符合产品语境、可扫描、可信赖、有辨识度，并且细节稳定”的 UI 任务。需要系统化设计建议时，加载 [design-intelligence.md](references/design-intelligence.md)；需要长期沉淀设计系统时，加载 [master-page-overrides.md](references/master-page-overrides.md)；上线前做 UI/UX QA 时，加载 [pre-delivery-checklist.md](references/pre-delivery-checklist.md)。\n\n可执行设计系统生成器位于 [design-system.mjs](scripts/design-system.mjs)，其原创知识包包括 [product-rules.json](data/product-rules.json)、[style-archetypes.json](data/style-archetypes.json)、[ux-quality-rules.json](data/ux-quality-rules.json) 和 [stack-ui-rules.json](data/stack-ui-rules.json)。\n\n## Purpose\n\n为页面、组件、仪表盘和工具界面建立设计方向，并完成可落地的视觉与交互 polish。\n\n## Procedure\n\n1. 明确界面的工作\n   - 先说清它帮助用户完成什么任务，而不是先选颜色或布局。\n   - 判断这是日常高频工具、营销展示、内容阅读、可视化探索、游戏，还是配置/管理后台。\n   - 如果已有 Figma、Sketch、MasterGo、Pixso、墨刀、摹客或截图是事实来源，优先还原设计上下文，不自行发明方向。\n\n2. 定义审美主张\n   - 写出目标用户、使用场景、可信赖感来源和一个可被记住的视觉锚点。\n   - 视觉锚点可以来自信息结构、真实媒体、数据形态、行业材质、字体性格、交互节奏或空间组织，而不是空泛装饰。\n   - 表现力必须服务业务语境：工具型界面重效率和稳定，展示型页面重主体识别和记忆点。\n   - 为页面类型设定设计拨盘：信息密度、视觉张力、动效强度、内容说服力和媒体真实性；这些拨盘必须随任务变化，而不是沿用同一套模板。\n\n3. 生成或读取设计系统\n   - 若项目还没有设计系统，可运行 `node skills/fec-ui-design/scripts/design-system.mjs \"<product audience tone>\" --project \"<name>\"` 生成建议。\n   - 若需要跨会话复用，使用 `--persist` 生成 `design-system/<project>/MASTER.md`；页面差异用 `--page <page>` 写入 `pages/<page>.md`。\n   - 构建具体页面时先读页面 override，再读 Master；页面规则只覆盖差异，不复制全量设计系统。\n\n4. 建立首屏与视觉层级\n   - 工具型界面：首屏直接呈现核心工作区、列表、表格、画布或编辑器。\n   - 落地页：H1 使用品牌、产品、地点、人名或明确品类，价值说明放在辅助文案。\n   - 产品/对象页：首屏必须可见真实产品、对象、状态或可检查媒体。\n   - 首屏应留下一个明确记忆点，但不能遮挡核心任务、导航和状态反馈。\n   - 营销和产品页需要先写清受众、痛点、承诺、证据和行动入口；文案结构服务转化，但不使用夸张、空泛或不可验证的声明。\n\n5. 组织视觉语言\n   - 字体：优先沿用项目字体体系；若任务允许建立新方向，选择能表达产品性格的标题/正文字体组合，并保证可读性。\n   - 色彩：明确主色、功能色、中性色和强调色的角色，避免所有元素平均用力。\n   - 空间：根据任务选择高密度、留白、非对称、分栏、画布式或编辑器式布局，不套用固定卡片模板。\n   - 动效：只为页面入场、层级展开、状态确认、错误反馈和重点引导建立节奏，并尊重 `prefers-reduced-motion`。\n   - 媒体：优先使用真实产品、真实状态、真实图表、可检查截图或本地生成资产；不要用模糊氛围图、占位 URL 或无关插画替代主体信息。\n   - 图表：先判断数据任务是趋势、比较、构成、分布还是流程，再选择图表，不把所有数据都做成卡片或饼图。\n\n6. 对齐设计系统、组件与 token\n   - 先复用项目已有组件、token、图标库、路由和布局约定。\n   - 缺少 token 时集中补齐或明确记录，不要在多个组件里散落硬编码。\n   - 复杂 UI 在实现前写出复用组件、新建组件、响应式策略和状态覆盖。\n   - 设计系统先定义语义 token、组件 API、状态矩阵和使用边界，再落到 Tailwind、CSS Modules、组件库或 CSS 变量实现。\n   - Tailwind 专项 token、variant、dark mode 和 class 治理分流到 Tailwind 设计系统工作流；跨设备布局、容器查询和触摸目标分流到响应式布局工作流。\n   - 组件 API 应区分基础组件、业务组件和页面私有组件；避免让单个 `variant` 同时承担语义、尺寸、密度和权限含义。\n\n7. 打磨几何、文本和状态\n   - 嵌套圆角遵循“外层圆角约等于内层圆角 + 间距”的光学关系。\n   - 非对称图标、播放三角、箭头、星标等需要按视觉中心微调。\n   - 标题和短文本可使用 `text-wrap: balance` 或 `text-wrap: pretty`。\n   - 表格、价格、计数器、计时器使用 `font-variant-numeric: tabular-nums`。\n   - 小控件点击区域至少 40x40px，空间允许时优先 44x44px。\n   - focus ring 用于键盘定位，hover/active 用于鼠标反馈，disabled 不只靠透明度表达。\n\n8. 验证设计结果\n   - 检查 loading、empty、error、disabled、hover、focus、selected 状态。\n   - 在 mobile(375px)、tablet(768px)、desktop(1440px) 检查文案是否溢出或遮挡。\n   - 对依赖图片、图表、画布或 3D 的界面，确认资源真实渲染且承担主体信息。\n   - 复核是否存在默认紫色渐变、空泛 hero、卡片堆叠、单一色相或无语境字体等模板化痕迹。\n   - 检查首屏是否同时具备任务入口、主体识别、可信证据和下一屏内容线索；若只剩装饰，应回到信息架构重做。\n   - 对生产级控件补齐 hover、active、focus-visible、disabled、loading、selected、invalid 和 skeleton 状态。\n   - 对仪表盘、表格、编辑器和配置台检查扫描路径、密度、固定尺寸和重复使用时的疲劳感。\n\n## Constraints\n\n- 不把工具型应用做成营销落地页；首屏应是可用工作区。\n- 不用通用紫色渐变、装饰光斑、堆叠卡片或空泛 hero 作为默认方案。\n- 不使用无语境默认字体、均匀无重点配色、重复圆角卡片和模板化双栏 hero 来替代真实设计判断。\n- 不在卡片里再套大卡片；页面分区优先用全宽区域或无框布局。\n- 不用可见文案解释控件本该表达的功能，常见动作优先用图标和 tooltip。\n- 不为了质感添加大面积装饰、模糊光斑、无语义渐变或无关重写。\n- 不为了统一风格让整个界面落入单一色相；颜色应有层次和语义区分。\n- 不把生成器输出当成不可修改的设计稿；它是决策起点，必须结合项目已有组件、token、用户任务和真实数据校正。\n- 不用不可检查的远程占位图、通用 stock 氛围图或 lorem 文案作为交付主体；缺素材时明确生成、制作或降级为真实结构化内容。\n- 不让视觉 polish 破坏键盘路径、触摸目标、文本可读性或低端设备性能。\n- 不把 Tailwind、组件库或 Storybook 文档等实现载体当成设计方向本身；它们应承接已经明确的产品语境和 token 边界。\n\n## Expected Output\n\n输出应包含明确的设计方向、首屏记忆点、视觉语言策略、组件/布局边界、状态覆盖、响应式策略和验证结果。复核时界面应符合业务语境、视觉层级支持快速扫描、交互状态完整，并避免泛化模板感。\n\nFile v2.5.0:README.md\n\n# UI 设计\n\nFrontend Craft skill for product UI direction, distinctive visual identity, polish, interaction states, and visual QA.\n\n## Skill\n\n- ID: `fec-ui-design`\n- Category: `design-ui`\n- Version: `2.6.0`\n- Source: `skills/fec-ui-design/SKILL.md`\n\n## Description\n\nUse when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or visual QA. When an external design file is authoritative, implement from that source instead of inventing direction; Chinese triggers include UI 设计, 设计系统, 视觉风格, 不要模板化, 高级感, 界面打磨, 交互状态.\n\n## Usage\n\nInstall or import this package with any skill runtime that understands the standard `SKILL.md` layout. The canonical source remains the Frontend Craft repository.\n\n## Packaged Files\n\n- [data/product-rules.json](data/product-rules.json)\n- [data/stack-ui-rules.json](data/stack-ui-rules.json)\n- [data/style-archetypes.json](data/style-archetypes.json)\n- [data/ux-quality-rules.json](data/ux-quality-rules.json)\n- [references/design-intelligence.md](references/design-intelligence.md)\n- [references/master-page-overrides.md](references/master-page-overrides.md)\n- [references/pre-delivery-checklist.md](references/pre-delivery-checklist.md)\n- [scripts/design-system.mjs](scripts/design-system.mjs)\n\n## Optional Related Packages\n\n- `@bovinphang/fec-implement-from-design`\n- `@bovinphang/fec-accessibility-check`\n- `@bovinphang/fec-code-review`\n- `@bovinphang/fec-tailwind-design-system`\n- `@bovinphang/fec-responsive-layout`\n- `@bovinphang/fec-storybook-component-doc`\n\n## License\n\nMIT\n\nFile v2.5.0:_meta.json\n\n{\n  \"ownerId\": \"kn7b0nh7hvj1pffeqc8y0dqwwh83m726\",\n  \"slug\": \"fec-ui-design\",\n  \"version\": \"2.5.0\",\n  \"publishedAt\": 1780841742589\n}\n\nFile v2.5.0:references/design-intelligence.md\n\n# 设计智能参考\n\n本参考用于把模糊的 UI 请求转成可执行设计系统。先识别产品类别，再组合风格原型、色彩角色、字体情绪、动效节奏、图表任务和 UX 风险。\n\n## 决策流程\n\n1. 提取关键词：产品类型、用户、场景、主要任务、内容密度、品牌语气、技术栈。\n2. 匹配产品规则：从 `data/product-rules.json` 选择最接近的类别，记录推荐结构、风险和反模式。\n3. 选择风格原型：从 `data/style-archetypes.json` 选择 1 个主风格和最多 1 个辅助风格，避免风格拼贴。\n4. 建立 token 方向：定义主色、强调色、背景、前景、边框、危险色和 focus ring 的语义角色。\n5. 选择字体情绪：不要只选“好看的字体”，要说明标题和正文各自承担的语气与可读性。\n6. 判断数据表达：趋势用折线/面积，比较用柱状，构成少量类别可用环图，流程用漏斗/步骤，明细必须保留表格替代。\n7. 输出反模式：每个设计建议必须附带“不要做什么”，避免落入通用模板。\n\n## 何时运行生成器\n\n使用以下命令生成设计系统建议：\n\n```bash\nnode skills/fec-ui-design/scripts/design-system.mjs \"beauty spa booking\" --project \"Serenity Spa\"\n```\n\n输出 Markdown 适合贴入计划或 PR 描述；输出 JSON 适合测试或工具消费：\n\n```bash\nnode skills/fec-ui-design/scripts/design-system.mjs \"fintech analytics dashboard\" --format json --stack next\n```\n\n## 输出必须回答\n\n- 这个界面的主任务是什么？\n- 推荐哪种页面结构或工作区结构？\n- 视觉锚点是什么，为什么贴合业务？\n- 主风格、字体、色彩、动效分别服务什么目标？\n- 图表和数据密度如何处理？\n- 哪些反模式必须避免？\n- 上线前最小 QA 清单是什么？\n\nFile v2.5.0:references/master-page-overrides.md\n\n# 全局/页面级差异覆盖\n\n当项目需要长期保持 UI 一致性时，用 `design-system/MASTER.md` 存放全局设计系统，用 `design-system/pages/<page>.md` 存放页面级差异。\n\n## 读取顺序\n\n1. 先检查当前页面是否有 `design-system/<project>/pages/<page>.md`。\n2. 如果存在，页面文件里的规则覆盖 Master 中相同维度。\n3. 如果不存在，完全遵循 `design-system/<project>/MASTER.md`。\n4. 页面文件只记录差异，不复制 Master 全文。\n\n## 生成命令\n\n```bash\nnode skills/fec-ui-design/scripts/design-system.mjs \"saas analytics dashboard\" --project \"Acme Console\" --persist --output-dir .\n```\n\n生成页面 overrides：\n\n```bash\nnode skills/fec-ui-design/scripts/design-system.mjs \"saas analytics dashboard\" --project \"Acme Console\" --page dashboard --persist --output-dir .\n```\n\n## 页面 override 应包含\n\n- 页面任务和信息密度差异\n- 布局差异：工作区、表格、图表、表单、详情页或营销首屏\n- token 差异：只写需要覆盖的语义色、间距、状态或图表色\n- 组件差异：只写当前页面新增或改变的组件行为\n- QA 焦点：当前页面最容易出错的响应式、可访问性、性能或交互风险\n\nFile v2.5.0:references/pre-delivery-checklist.md\n\n# UI/UX 交付前检查\n\n## 严重\n\n- 文本对比度：正文至少 4.5:1，大字号至少 3:1。\n- 键盘可达：菜单、弹窗、标签页、抽屉和自定义控件都能键盘操作。\n- 焦点可见：focus ring 不能被全局样式移除。\n- 图标按钮：必须有可访问名称。\n- 触摸目标：移动端主要交互至少 44x44px；空间允许时使用 48px。\n\n## 高优先级\n\n- 首屏：工具型界面直接展示核心工作区，不用营销 hero 替代功能。\n- 响应式：375px、768px、1024px、1440px 无水平溢出、遮挡或文本截断。\n- 性能：图片有尺寸或 aspect-ratio；非首屏图片懒加载；列表过大时虚拟化。\n- 动效：只动画 transform/opacity，尊重 `prefers-reduced-motion`。\n- 状态：loading、empty、error、disabled、hover、focus、selected 都有设计。\n\n## 中优先级\n\n- 字体：正文不小于 16px；数字列、金额、计时器使用 tabular nums。\n- 颜色：错误、成功、警告不只靠颜色表达。\n- 表单：label 常驻，错误靠近字段，提交后有 loading/success/error。\n- 导航：当前路由可识别，返回行为可预测，深层页面仍能回到主路径。\n- 图表：有标题、单位、图例、tooltip 或明细表替代，色彩不依赖红绿区分。\n\n## 反模式\n\n- 用装饰光斑、紫色渐变、卡片堆叠掩盖信息结构不足。\n- hover 导致布局位移。\n- `transition: all`、`will-change: all`。\n- 低对比灰字、无意义透明度、单一色相界面。\n- 空状态只有“暂无数据”，没有下一步动作。\n\nFile v2.5.0:skill-card.md\n\n## Description: <br>\nUse when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or visual QA. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[bovinphang](https://clawhub.ai/user/bovinphang) <br>\n\n### License/Terms of Use: <br>\nMIT-0 <br>\n\n\n## Use Case: <br>\nDevelopers, designers, and frontend agents use this skill to establish product-specific UI direction, design-system guidance, visual hierarchy, responsive behavior, interaction states, and pre-delivery UI/UX checks. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: Broad activation wording may route ordinary frontend work into opinionated UI design guidance when narrower behavior is desired. <br>\nMitigation: Review routing expectations before installation and adjust local skill activation rules if the team wants a narrower trigger surface. <br>\nRisk: The optional design-system generator can create project Markdown files when run with --persist. <br>\nMitigation: Use --persist only when durable design-system files are intended, and review generated files before relying on them. <br>\nRisk: Design guidance can be incorrect or misleading if treated as a final specification without product context. <br>\nMitigation: Review recommendations against project tokens, shipped components, source design files, accessibility requirements, and target viewport checks before deployment. <br>\n\n\n## Reference(s): <br>\n- [ClawHub package page](https://clawhub.ai/bovinphang/fec-ui-design) <br>\n- [Design intelligence reference](references/design-intelligence.md) <br>\n- [Master/page overrides reference](references/master-page-overrides.md) <br>\n- [Pre-delivery checklist](references/pre-delivery-checklist.md) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [Guidance, Markdown, Code, Shell commands, Configuration] <br>\n**Output Format:** [Markdown guidance with optional shell commands, generated design-system notes, and JSON output from the bundled generator] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [May optionally persist design-system Markdown files when the generator is run with --persist.] <br>\n\n## Skill Version(s): <br>\n2.5.0 (source: ClawHub release metadata) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nFile v2.5.0:data/product-rules.json\n\n[\n  {\n    \"id\": \"saas\",\n    \"keywords\": [\"saas\", \"b2b\", \"subscription\", \"crm\", \"admin\", \"console\"],\n    \"pattern\": \"Work-first dashboard with concise onboarding and persistent primary action\",\n    \"style\": \"data-dense\",\n    \"colorMood\": \"trustworthy neutrals with a clear action accent\",\n    \"typographyMood\": \"professional, compact, readable\",\n    \"motion\": \"quiet transitions for filters, drawers, and state changes\",\n    \"chart\": \"stat cards plus line/bar charts for trends and comparisons\",\n    \"risks\": [\"marketing hero replacing the workspace\", \"low-density cards hiding operational detail\"],\n    \"antiPatterns\": [\"decorative gradients as primary structure\", \"unlabeled icon-only tools\"]\n  },\n  {\n    \"id\": \"fintech\",\n    \"keywords\": [\"fintech\", \"bank\", \"finance\", \"crypto\", \"wallet\", \"invoice\", \"billing\"],\n    \"pattern\": \"Trust-first dashboard with balances, risk states, audit trail, and clear next actions\",\n    \"style\": \"minimal\",\n    \"colorMood\": \"stable blue/green neutrals with strict danger states\",\n    \"typographyMood\": \"precise, numeric, high contrast\",\n    \"motion\": \"subtle confirmation and risk feedback only\",\n    \"chart\": \"time-series, comparison bars, and tabular details with export paths\",\n    \"risks\": [\"playful visual language reducing trust\", \"color-only profit/loss communication\"],\n    \"antiPatterns\": [\"neon cyber styling for serious finance\", \"ambiguous destructive actions\"]\n  },\n  {\n    \"id\": \"healthcare\",\n    \"keywords\": [\"health\", \"medical\", \"clinic\", \"dental\", \"pharmacy\", \"patient\", \"therapy\"],\n    \"pattern\": \"Guided task flow with calm hierarchy, strong labels, and clear recovery paths\",\n    \"style\": \"minimal\",\n    \"colorMood\": \"calm accessible tones with clear warning and error roles\",\n    \"typographyMood\": \"human, readable, low fatigue\",\n    \"motion\": \"reassuring transitions, no surprise movement\",\n    \"chart\": \"progress trends and summaries with plain-language explanations\",\n    \"risks\": [\"low contrast calming palettes\", \"hidden labels in critical forms\"],\n    \"antiPatterns\": [\"decorative medical imagery over task clarity\", \"tiny touch targets\"]\n  },\n  {\n    \"id\": \"ecommerce\",\n    \"keywords\": [\"shop\", \"store\", \"ecommerce\", \"marketplace\", \"cart\", \"checkout\", \"product\"],\n    \"pattern\": \"Product-led browsing with strong media, filters, comparison, and checkout confidence\",\n    \"style\": \"editorial\",\n    \"colorMood\": \"brand-forward accents with neutral product surfaces\",\n    \"typographyMood\": \"clear commerce hierarchy with readable prices\",\n    \"motion\": \"fast hover/tap feedback and cart confirmation\",\n    \"chart\": \"only for seller dashboards or comparison analytics\",\n    \"risks\": [\"visual effects competing with product inspection\", \"unclear price/availability states\"],\n    \"antiPatterns\": [\"cropped product media\", \"hidden shipping or error feedback\"]\n  },\n  {\n    \"id\": \"creative\",\n    \"keywords\": [\"portfolio\", \"agency\", \"studio\", \"creator\", \"photography\", \"editorial\"],\n    \"pattern\": \"Portfolio-led narrative with memorable first viewport and selective case-study depth\",\n    \"style\": \"editorial\",\n    \"colorMood\": \"high-contrast neutrals with one expressive accent\",\n    \"typographyMood\": \"distinctive display with restrained body\",\n    \"motion\": \"purposeful reveals tied to content rhythm\",\n    \"chart\": \"rare; use visual timelines or case metrics when needed\",\n    \"risks\": [\"style overpowering work samples\", \"scroll theatrics blocking access\"],\n    \"antiPatterns\": [\"generic split hero\", \"decorative mockups without real work\"]\n  },\n  {\n    \"id\": \"wellness\",\n    \"keywords\": [\"spa\", \"beauty\", \"wellness\", \"meditation\", \"fitness\", \"booking\", \"lifestyle\"],\n    \"pattern\": \"Emotion-led service page with service clarity, trust proof, and low-friction booking\",\n    \"style\": \"soft\",\n    \"colorMood\": \"warm natural tones with a premium accent\",\n    \"typographyMood\": \"calm, elegant, approachable\",\n    \"motion\": \"gentle, short transitions with reduced-motion fallback\",\n    \"chart\": \"habit streaks or progress charts only when product-led\",\n    \"risks\": [\"pastel contrast failures\", \"luxury styling hiding booking details\"],\n    \"antiPatterns\": [\"overly bright wellness gradients\", \"placeholder stock atmosphere\"]\n  },\n  {\n    \"id\": \"education\",\n    \"keywords\": [\"education\", \"learning\", \"course\", \"student\", \"school\", \"flashcard\"],\n    \"pattern\": \"Learning path with progress, next task, feedback loops, and approachable empty states\",\n    \"style\": \"bento\",\n    \"colorMood\": \"encouraging accents with quiet surfaces\",\n    \"typographyMood\": \"friendly, readable, structured\",\n    \"motion\": \"reward moments and progress feedback, never distracting from reading\",\n    \"chart\": \"progress, mastery, and completion summaries\",\n    \"risks\": [\"gamification clutter\", \"unclear next lesson state\"],\n    \"antiPatterns\": [\"dense dashboards for beginners\", \"reward animation blocking tasks\"]\n  },\n  {\n    \"id\": \"gaming\",\n    \"keywords\": [\"game\", \"gaming\", \"esports\", \"arcade\", \"quest\", \"leaderboard\"],\n    \"pattern\": \"Immersive status-first interface with strong feedback and readable controls\",\n    \"style\": \"immersive\",\n    \"colorMood\": \"high-energy palette balanced by readable surfaces\",\n    \"typographyMood\": \"expressive headings with legible UI text\",\n    \"motion\": \"high feedback, strict performance budget\",\n    \"chart\": \"leaderboards, comparisons, progression, and match history\",\n    \"risks\": [\"motion overload\", \"stylized text reducing readability\"],\n    \"antiPatterns\": [\"all-caps tiny labels\", \"animations that delay input\"]\n  },\n  {\n    \"id\": \"data-dashboard\",\n    \"keywords\": [\"dashboard\", \"analytics\", \"metrics\", \"kpi\", \"monitoring\", \"reporting\"],\n    \"pattern\": \"Scan-first analytical workspace with filters, summaries, charts, and drill-down paths\",\n    \"style\": \"data-dense\",\n    \"colorMood\": \"semantic chart palette with restrained UI chrome\",\n    \"typographyMood\": \"compact, tabular, legible\",\n    \"motion\": \"state transitions only; no decorative chart animation by default\",\n    \"chart\": \"match chart to question: trend, compare, composition, distribution, funnel, timeline\",\n    \"risks\": [\"chart decoration hiding insight\", \"too many equal-weight cards\"],\n    \"antiPatterns\": [\"pie charts for many categories\", \"color-only series distinction\"]\n  }\n]\n\nFile v2.5.0:data/stack-ui-rules.json\n\n[\n  { \"stack\": \"react\", \"keywords\": [\"react\", \"vite\", \"spa\"], \"guidance\": [\"Keep visual components pure and prop-driven\", \"Split expensive lists and charts\", \"Use existing component and token conventions before adding UI primitives\"] },\n  { \"stack\": \"next\", \"keywords\": [\"next\", \"nextjs\", \"app router\"], \"guidance\": [\"Keep route shells and loading/error states explicit\", \"Prefer server components for static content and data shells\", \"Use client components only for interaction-heavy UI\"] },\n  { \"stack\": \"vue\", \"keywords\": [\"vue\", \"vue3\"], \"guidance\": [\"Use scoped components and composables for view logic\", \"Keep Pinia/global state out of purely local UI state\", \"Preserve SFC style boundaries\"] },\n  { \"stack\": \"nuxt\", \"keywords\": [\"nuxt\"], \"guidance\": [\"Use layouts for persistent UI chrome\", \"Align useFetch/useAsyncData states with loading and error UI\", \"Keep route middleware separate from component display logic\"] },\n  { \"stack\": \"svelte\", \"keywords\": [\"svelte\"], \"guidance\": [\"Use component-local reactivity for UI state\", \"Keep transitions meaningful and reduced-motion aware\", \"Avoid global stores for local interaction state\"] },\n  { \"stack\": \"astro\", \"keywords\": [\"astro\"], \"guidance\": [\"Use islands only where interaction is needed\", \"Keep marketing content fast and mostly static\", \"Prioritize image optimization and content hierarchy\"] },\n  { \"stack\": \"angular\", \"keywords\": [\"angular\"], \"guidance\": [\"Prefer standalone components\", \"Keep templates declarative\", \"Use CDK/a11y patterns for overlays and focus\"] },\n  { \"stack\": \"react-native\", \"keywords\": [\"react native\", \"rn\", \"mobile\"], \"guidance\": [\"Respect safe areas and platform gestures\", \"Use 44/48px touch targets\", \"Test dynamic type and screen reader labels\"] },\n  { \"stack\": \"flutter\", \"keywords\": [\"flutter\"], \"guidance\": [\"Prefer composition with small widgets\", \"Use theme tokens instead of per-screen styles\", \"Respect platform text scaling and safe areas\"] },\n  { \"stack\": \"threejs\", \"keywords\": [\"three\", \"threejs\", \"webgl\", \"3d\"], \"guidance\": [\"Make the primary scene full-bleed when it is the experience\", \"Provide DOM controls and accessible summaries\", \"Verify canvas is nonblank and resources dispose cleanly\"] },\n  { \"stack\": \"shadcn\", \"keywords\": [\"shadcn\", \"tailwind\"], \"guidance\": [\"Use shadcn components as accessible primitives\", \"Map theme variables before custom styling\", \"Avoid arbitrary utility soup when a token exists\"] },\n  { \"stack\": \"tailwind\", \"keywords\": [\"tailwind\", \"html\"], \"guidance\": [\"Keep mobile-first utilities\", \"Extract repeated class patterns into components\", \"Use semantic CSS variables for theme-critical color\"] }\n]\n\nFile v2.5.0:data/style-archetypes.json\n\n[\n  {\n    \"id\": \"minimal\",\n    \"keywords\": [\"minimal\", \"clean\", \"enterprise\", \"trust\", \"calm\"],\n    \"description\": \"Quiet surfaces, strong hierarchy, restrained accents, fast scanning.\",\n    \"tokens\": { \"radius\": \"4-8px\", \"shadow\": \"low\", \"density\": \"medium-high\" },\n    \"bestFor\": [\"enterprise\", \"finance\", \"healthcare\", \"documentation\"],\n    \"avoid\": [\"empty white space without information priority\", \"low-contrast gray text\"]\n  },\n  {\n    \"id\": \"editorial\",\n    \"keywords\": [\"editorial\", \"magazine\", \"portfolio\", \"brand\", \"luxury\"],\n    \"description\": \"Expressive typography, strong media, controlled asymmetry, narrative pacing.\",\n    \"tokens\": { \"radius\": \"0-8px\", \"shadow\": \"content-dependent\", \"density\": \"medium\" },\n    \"bestFor\": [\"creative\", \"ecommerce\", \"portfolio\", \"launch pages\"],\n    \"avoid\": [\"decorative text that harms reading\", \"media that hides the actual product\"]\n  },\n  {\n    \"id\": \"glass\",\n    \"keywords\": [\"glass\", \"modern\", \"ai\", \"overlay\", \"depth\"],\n    \"description\": \"Layered translucent surfaces used sparingly for hierarchy and focus.\",\n    \"tokens\": { \"radius\": \"12-20px\", \"shadow\": \"soft depth\", \"density\": \"medium\" },\n    \"bestFor\": [\"modern SaaS\", \"AI tools\", \"visualization\"],\n    \"avoid\": [\"blurred low-contrast text\", \"using blur as pure decoration\"]\n  },\n  {\n    \"id\": \"brutalist\",\n    \"keywords\": [\"brutalist\", \"raw\", \"bold\", \"youth\", \"experimental\"],\n    \"description\": \"Hard edges, bold contrast, visible structure, intentionally direct composition.\",\n    \"tokens\": { \"radius\": \"0-4px\", \"shadow\": \"hard or none\", \"density\": \"variable\" },\n    \"bestFor\": [\"creative campaigns\", \"youth brands\", \"experimental portfolios\"],\n    \"avoid\": [\"serious regulated workflows\", \"inaccessible contrast or chaotic navigation\"]\n  },\n  {\n    \"id\": \"bento\",\n    \"keywords\": [\"bento\", \"cards\", \"modular\", \"features\", \"education\"],\n    \"description\": \"Modular information blocks with varied scale and clear grouping.\",\n    \"tokens\": { \"radius\": \"8px or less unless system differs\", \"shadow\": \"subtle\", \"density\": \"medium\" },\n    \"bestFor\": [\"feature overviews\", \"learning paths\", \"product summaries\"],\n    \"avoid\": [\"card-inside-card layouts\", \"equal-weight modules that hide priority\"]\n  },\n  {\n    \"id\": \"data-dense\",\n    \"keywords\": [\"dashboard\", \"analytics\", \"table\", \"monitoring\", \"dense\"],\n    \"description\": \"Operational density, table/chart alignment, semantic color, stable controls.\",\n    \"tokens\": { \"radius\": \"4-8px\", \"shadow\": \"minimal\", \"density\": \"high\" },\n    \"bestFor\": [\"dashboards\", \"admin\", \"monitoring\", \"analytics\"],\n    \"avoid\": [\"marketing hero screens\", \"large decorative cards\"]\n  },\n  {\n    \"id\": \"immersive\",\n    \"keywords\": [\"immersive\", \"game\", \"3d\", \"canvas\", \"story\", \"visualization\"],\n    \"description\": \"Full-bleed visual space with controls that remain predictable and readable.\",\n    \"tokens\": { \"radius\": \"contextual\", \"shadow\": \"scene-driven\", \"density\": \"low-medium\" },\n    \"bestFor\": [\"games\", \"3D previews\", \"interactive visualization\"],\n    \"avoid\": [\"framing the primary scene in a decorative card\", \"controls hidden by atmosphere\"]\n  },\n  {\n    \"id\": \"mobile-native\",\n    \"keywords\": [\"mobile\", \"app\", \"native\", \"touch\", \"safe-area\"],\n    \"description\": \"Touch-first layout with platform-safe spacing, clear feedback, and resilient text scaling.\",\n    \"tokens\": { \"radius\": \"platform-consistent\", \"shadow\": \"native elevation\", \"density\": \"touch-comfortable\" },\n    \"bestFor\": [\"mobile apps\", \"responsive tools\", \"field workflows\"],\n    \"avoid\": [\"hover-only behavior\", \"content behind safe areas\"]\n  },\n  {\n    \"id\": \"soft\",\n    \"keywords\": [\"soft\", \"wellness\", \"beauty\", \"calm\", \"organic\"],\n    \"description\": \"Warm surfaces, gentle contrast, tactile spacing, and calm interaction rhythm.\",\n    \"tokens\": { \"radius\": \"8-16px\", \"shadow\": \"soft\", \"density\": \"low-medium\" },\n    \"bestFor\": [\"wellness\", \"beauty\", \"lifestyle\", \"care services\"],\n    \"avoid\": [\"pastel contrast failures\", \"vague atmospheric imagery over real services\"]\n  }\n]\n\nFile v2.5.0:data/ux-quality-rules.json\n\n[\n  {\n    \"category\": \"accessibility\",\n    \"priority\": \"critical\",\n    \"checks\": [\"Text contrast meets WCAG AA\", \"Focus rings are visible\", \"Icon-only controls have names\", \"Keyboard order follows visual order\"],\n    \"avoid\": [\"Removing outlines globally\", \"Color-only error or success states\"]\n  },\n  {\n    \"category\": \"interaction\",\n    \"priority\": \"critical\",\n    \"checks\": [\"Primary controls respond within 100ms\", \"Touch targets are at least 44x44px\", \"Disabled states are semantic and visible\"],\n    \"avoid\": [\"Hover-only primary actions\", \"Tap targets packed without spacing\"]\n  },\n  {\n    \"category\": \"performance\",\n    \"priority\": \"high\",\n    \"checks\": [\"Images reserve dimensions\", \"Large lists are virtualized\", \"Animations use transform/opacity\", \"Heavy visual work is deferred or moved off main thread\"],\n    \"avoid\": [\"Animating layout properties\", \"Unbounded chart or table rendering\"]\n  },\n  {\n    \"category\": \"layout\",\n    \"priority\": \"high\",\n    \"checks\": [\"375/768/1024/1440px layouts are checked\", \"No horizontal overflow\", \"Fixed headers/footers reserve content space\"],\n    \"avoid\": [\"Desktop-first max-width fixes\", \"Nested scroll regions without reason\"]\n  },\n  {\n    \"category\": \"typography\",\n    \"priority\": \"medium\",\n    \"checks\": [\"Body text stays readable\", \"Line length is controlled\", \"Numbers use tabular figures where alignment matters\"],\n    \"avoid\": [\"Tiny low-contrast labels\", \"Negative tracking on body text\"]\n  },\n  {\n    \"category\": \"animation\",\n    \"priority\": \"medium\",\n    \"checks\": [\"Micro-interactions are 150-300ms\", \"Exit is faster than enter\", \"Reduced motion is respected\"],\n    \"avoid\": [\"Decorative motion without cause\", \"Blocking input during transitions\"]\n  },\n  {\n    \"category\": \"forms\",\n    \"priority\": \"medium\",\n    \"checks\": [\"Labels are persistent\", \"Errors appear near fields\", \"Submit has loading/success/error feedback\", \"First invalid field receives focus\"],\n    \"avoid\": [\"Placeholder-only labels\", \"Error summary without field recovery\"]\n  },\n  {\n    \"category\": \"navigation\",\n    \"priority\": \"high\",\n    \"checks\": [\"Current location is visible\", \"Back behavior preserves state\", \"Primary navigation remains reachable\"],\n    \"avoid\": [\"Mixing multiple primary nav systems\", \"Using modals for primary navigation\"]\n  },\n  {\n    \"category\": \"charts\",\n    \"priority\": \"medium\",\n    \"checks\": [\"Chart type matches data question\", \"Units and legends are visible\", \"Data has text/table fallback\", \"Color is supplemented by shape or labels\"],\n    \"avoid\": [\"Pie charts for many categories\", \"Color-only series distinction\"]\n  }\n]\n\nFile v2.5.0:metadata.json\n\n{\n  \"id\": \"fec-ui-design\",\n  \"name\": \"UI 设计\",\n  \"category\": \"design-ui\",\n  \"tags\": [\n    \"ui-design\",\n    \"visual-direction\",\n    \"visual-identity\",\n    \"ui-polish\",\n    \"anti-generic\",\n    \"visual-qa\",\n    \"design-system\",\n    \"industry-ui\",\n    \"chart-ux\"\n  ],\n  \"summary\": \"Frontend Craft skill for product UI direction, distinctive visual identity, polish, interaction states, and visual QA.\",\n  \"version\": \"2.6.0\",\n  \"license\": \"MIT\",\n  \"homepage\": \"https://github.com/bovinphang/frontend-craft\",\n  \"repository\": \"https://github.com/bovinphang/frontend-craft\",\n  \"keywords\": [\n    \"design-ui\",\n    \"ui-design\",\n    \"visual-direction\",\n    \"visual-identity\",\n    \"ui-polish\",\n    \"anti-generic\",\n    \"visual-qa\",\n    \"design-system\",\n    \"industry-ui\",\n    \"chart-ux\",\n    \"design-system-generation\",\n    \"industry-specific-ui\",\n    \"master-page-overrides\"\n  ],\n  \"platforms\": [\n    \"skills-cli\",\n    \"skillreg\",\n    \"claude-code\",\n    \"codex\",\n    \"cursor\",\n    \"opencode\",\n    \"openclaw\",\n    \"generic-skill-runtime\"\n  ],\n  \"description\": \"Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or visual QA. When an external design file is authoritative, implement from that source instead of inventing direction; Chinese triggers include UI 设计, 设计系统, 视觉风格, 不要模板化, 高级感, 界面打磨, 交互状态.\",\n  \"source\": \"skills/fec-ui-design\",\n  \"references\": [\n    \"data/product-rules.json\",\n    \"data/stack-ui-rules.json\",\n    \"data/style-archetypes.json\",\n    \"data/ux-quality-rules.json\",\n    \"references/design-intelligence.md\",\n    \"references/master-page-overrides.md\",\n    \"references/pre-delivery-checklist.md\",\n    \"scripts/design-system.mjs\"\n  ],\n  \"relations\": {\n    \"relatedSkills\": [\n      \"fec-implement-from-design\",\n      \"fec-accessibility-check\",\n      \"fec-code-review\",\n      \"fec-tailwind-design-system\",\n      \"fec-responsive-layout\",\n      \"fec-storybook-component-doc\"\n    ],\n    \"boundaryWorkflows\": [\n      \"Use an implementation-from-design workflow when an external design file is the source of truth.\",\n      \"Use an accessibility workflow for keyboard, focus, ARIA, semantic structure, and contrast checks.\",\n      \"Use a code review workflow when UI issues cross architecture, types, rendering performance, and maintainability.\",\n      \"Use generated design-system recommendations as direction only; external design files, project tokens, and shipped component APIs remain authoritative.\"\n    ],\n    \"capabilityTags\": [\n      \"ui-design\",\n      \"design-direction\",\n      \"design-system\",\n      \"master-page-overrides\",\n      \"industry-ui\",\n      \"visual-identity\",\n      \"ui-polish\",\n      \"anti-generic\",\n      \"visual-qa\",\n      \"chart-ux\",\n      \"accessibility\"\n    ]\n  }\n}","readmeExcerpt":"Skill: UI Design Owner: bovinphang Summary: Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or Tags: latest:2.9.0 Version history: v2.9.0 | 2026-09-27T03:52:43.126Z | user","codeSnippets":[],"executableExamples":[{"language":"bash","snippet":"node skills/fec-ui-design/scripts/design-system.mjs \"beauty spa booking\" --project \"Serenity Spa\""},{"language":"bash","snippet":"node skills/fec-ui-design/scripts/design-system.mjs \"fintech analytics dashboard\" --format json --stack next"},{"language":"bash","snippet":"node skills/fec-ui-design/scripts/design-system.mjs \"saas analytics dashboard\" --project \"Acme Console\" --persist --output-dir ."},{"language":"bash","snippet":"node skills/fec-ui-design/scripts/design-system.mjs \"saas analytics dashboard\" --project \"Acme Console\" --page dashboard --persist --output-dir ."},{"language":"bash","snippet":"node skills/fec-ui-design/scripts/design-system.mjs \"beauty spa booking\" --project \"Serenity Spa\""},{"language":"bash","snippet":"node skills/fec-ui-design/scripts/design-system.mjs \"fintech analytics dashboard\" --format json --stack next"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: fec-ui-design\ndescription: Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or visual QA. Interface polishing, interactive state.\n---\n\n#UI design\n\nSuitable for UI tasks that require advancing the front-end interface to be \"in line with the product context, scannable, trustworthy, recognizable, and stable in details\". When systematic design suggestions are needed, load [design-intelligence.md](references/design-intelligence.md); when long-term precipitation of the design system is required, load [master-page-overrides.md](references/master-page-overrides.md); when doing UI/UX QA before going online, load [pre-delivery-checklist.md](references/pre-delivery-checklist.md).\n\nThe executable design system generator is located at [design-system.mjs](scripts/design-system.mjs), and its original knowledge package includes [product-rules.json](data/product-rules.json), [style-archetypes.json](data/style-archetypes.json), [ux-quality-rules.json](data/ux-quality-rules.json) and [stack-ui-rules.json](data/stack-ui-rules.json).\n\n## Purpose\n\nEstablish design direction for pages, components, dashboards and tool interfaces, and complete implementable visual and interactive polish.\n\n## Procedure\n\n1. Clarify the work of the interface\n   - Start by saying what task it helps the user accomplish, rather than choosing a color or layout first.\n   - Determine whether this is a daily high-frequency tool, marketing display, content reading, visual exploration, game, or configuration/management backend.\n   - If Figma, Sketch, MasterGo, Pixso, Ink Knife, Mockup or screenshots are the source of truth, give priority to restoring the design context and do not invent your own direction.\n\n2. Read the design context\n   - Before deciding on layout, colors, fonts, or motion, write out a line of design that reads: page type, target audience, primary mission, brand constraints, and sources of trustworthiness.\n   - Determine whether the current interface is a visual website, work/brand display, product marketing, tool workspace, data-intensive interface, mobile native process, or design draft restoration task.\n   - If the brief is clearly divergent, e.g. \"minimalist yet intensely experimental\", only ask a question that will change direction; otherwise make clear choices based on context.\n   - Regulated, public service, medical, financial, children, or strong accessibility scenarios prioritize stability, clarity, and recoverability without sacrificing usability for aesthetic adventures.\n\n3. Define aesthetic proposition\n   - Write out the target users, usage scenarios, sources of trustworthiness, and a visual anchor that will be remembered.\n   - Visual anchors can come from information structure, real media, data form, industry materia"},{"path":"README.md","content":"# UI design\n\nProduct-context UI direction with anti-generic design dials, distinctive visual identity, media strategy, interaction states, and visual QA.\n\n## Skill\n\n- ID: `fec-ui-design`\n- Category: `design-ui`\n- Version: `2.9.0`\n- Source: `skills/fec-ui-design/SKILL.md`\n\n## Description\n\nUse when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or visual QA. Interface polishing, interactive state.\n\n## Usage\n\nInstall or import this package with any skill runtime that understands the standard `SKILL.md` layout. The canonical source remains the Frontend Craft repository.\n\n## Packaged Files\n\n- [data/product-rules.json](data/product-rules.json)\n- [data/stack-ui-rules.json](data/stack-ui-rules.json)\n- [data/style-archetypes.json](data/style-archetypes.json)\n- [data/ux-quality-rules.json](data/ux-quality-rules.json)\n- [references/design-intelligence.md](references/design-intelligence.md)\n- [references/master-page-overrides.md](references/master-page-overrides.md)\n- [references/pre-delivery-checklist.md](references/pre-delivery-checklist.md)\n- [scripts/design-system.mjs](scripts/design-system.mjs)\n\n## Optional Related Packages\n\n- `@bovinphang/fec-image-generation`\n- `@bovinphang/fec-implement-from-design`\n- `@bovinphang/fec-accessibility-check`\n- `@bovinphang/fec-code-review`\n- `@bovinphang/fec-tailwind-design-system`\n- `@bovinphang/fec-responsive-layout`\n- `@bovinphang/fec-storybook-component-doc`\n- `@bovinphang/fec-web-video-presentation`\n\n## License\n\nMIT"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn7b0nh7hvj1pffeqc8y0dqwwh83m726\",\n  \"slug\": \"fec-ui-design\",\n  \"version\": \"2.9.0\",\n  \"publishedAt\": 1790481163126\n}"},{"path":"references/design-intelligence.md","content":"#DesignSmartReference\n\nThis reference is used to turn obscure UI requests into an executable design system. Start by identifying the product category, then combine style archetypes, color roles, font moods, motion rhythms, graphic tasks, and UX risks.\n\n## Decision-making process\n\n1. Extract keywords: product type, users, scenarios, main tasks, content density, brand tone, technology stack.\n2. Write out the design reads: page type, audience, primary mission, brand constraints, and sources of trustworthiness.\n3. Match product rules: Select the closest category from `data/product-rules.json` and record the recommended structure, risks and anti-patterns.\n4. Select style archetypes: Select 1 main style and up to 1 auxiliary style from `data/style-archetypes.json` to avoid style collage.\n5. Set the design dial: visual tension, motion intensity, information density, media authenticity, and content persuasiveness are all expressed on a scale of 1-10, and vary with the page type.\n6. Establish token direction: define the semantic roles of main color, accent color, background, foreground, border, dangerous color and focus ring.\n7. Choose font mood: Don’t just choose a “good-looking font”, explain the tone and readability of the title and body text respectively.\n8. Judgment of data expression: Use polylines/areas for trends, columns for comparisons, donut charts to form a small number of categories, funnels/steps for processes, and tables must be retained for details.\n9. Output anti-patterns and quality gates: Every design suggestion must be accompanied by a “what not to do” and supplemented with above-the-fold, CTAs, media authenticity, section changes, and state integrity checks based on page type.\n\n## Direction Advisor\n\nWhen the user only says \"looks better\", \"give me some directions\", \"I don't know what style\" and there is no authoritative design draft, don't continue to ask general questions about taste. First, give 3 directions with obvious differences so that users can judge the choice.\n\nEach direction must contain:\n\n- Applicable scenarios: Why it is suitable for the current product, audience and task.\n- Visual anchors: information structure, real media, data form, material, font character, spatial organization or interaction rhythm.\n- Key tokens: main color, accent color, background, font mood, rounded corners/border/shadow tendency.\n- What to avoid: This is the easiest templating error to slip into.\n\nThe three directions should come from different design logics, such as:\n\n- Information architecture type: high-density, rational, data-first, suitable for B2B, operations, finance, and engineering tools.\n- Editorial narrative type: layout, white space, strong text hierarchy, suitable for brand stories, content products, and portfolios.\n- Product demonstration type: real screenshots, objects, status, and process evidence are given priority, suitable for SaaS, hardware, and developer tools.\n- Experimental expression: strong motion effect, sense of space, "},{"path":"references/master-page-overrides.md","content":"# Global/page level difference coverage\n\nWhen the project needs to maintain UI consistency for a long time, use `design-system/MASTER.md` to store the global design system, and use `design-system/pages/<page>.md` to store page-level differences.\n\n## Reading order\n\n1. First check whether the current page has `design-system/<project>/pages/<page>.md`.\n2. If it exists, the rules in the page file cover the same dimensions in the Master.\n3. If it does not exist, follow `design-system/<project>/MASTER.md` exactly.\n4. The page file only records differences and does not copy the full text of the Master.\n\n## Generate command\n\n```bash\nnode skills/fec-ui-design/scripts/design-system.mjs \"saas analytics dashboard\" --project \"Acme Console\" --persist --output-dir .\n```\n\nGenerate page overrides:\n\n```bash\nnode skills/fec-ui-design/scripts/design-system.mjs \"saas analytics dashboard\" --project \"Acme Console\" --page dashboard --persist --output-dir .\n```\n\n## Page override should contain\n\n- Differences in page tasks and information density\n- Layout differences: workspace, table, chart, form, detail page or marketing first screen\n- token difference: only write the semantic color, spacing, status or chart color that needs to be covered\n- Component differences: only write new or changed component behaviors on the current page\n- QA Focus: The current page’s most error-prone responsiveness, accessibility, performance, or interaction risks"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or Skill: UI Design Owner: bovinphang Summary: Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or Tags: latest:2.9.0 Version history: v2.9.0 | 2026-09-27T03:52:43.126Z | user","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1793,"uniquenessScore":46,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T12:31:19.223Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-11T12:31:19.223Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-11T15:17:43.347Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}