{
  "schemaVersion": "1.0",
  "item": {
    "slug": "frontend-design-extractor",
    "name": "Frontend Design Extractor",
    "source": "tencent",
    "type": "skill",
    "category": "AI 智能",
    "sourceUrl": "https://clawhub.ai/Xsir0/frontend-design-extractor",
    "canonicalUrl": "https://clawhub.ai/Xsir0/frontend-design-extractor",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/frontend-design-extractor",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend-design-extractor",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T16:55:25.780Z",
      "expiresAt": "2026-05-07T16:55:25.780Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
        "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/frontend-design-extractor"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/frontend-design-extractor",
    "agentPageUrl": "https://openagent3.xyz/skills/frontend-design-extractor/agent",
    "manifestUrl": "https://openagent3.xyz/skills/frontend-design-extractor/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/frontend-design-extractor/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Overview",
        "body": "Extract a reusable UI/UX design spec from a frontend codebase by inventorying UI sources, documenting foundations, cataloging components, and capturing page-level patterns and behaviors. Exclude business logic and domain-specific workflows. Framework-agnostic: adapt to the actual stack in the target repo."
      },
      {
        "title": "Quick start",
        "body": "Confirm mode: new project (greenfield) or refactor existing. Clarify that business logic is out of scope.\nIf existing repo: run scripts/scan_ui_sources.sh to scan the repo root (no directory layout assumptions). It uses common globs + keyword hits, and ignores common build/cache dirs and extraction output folders by default.\nOptionally: scripts/scan_ui_sources.sh <repo_root> [out_file] [extra_glob ...] or --root/--out/--ignore for nonstandard layouts.\nCreate the output folder (default ./ui-ux-spec) via scripts/generate_output_skeleton.sh and write all extraction results inside it.\nProduce outputs in the default structure (see \"Output structure\")."
      },
      {
        "title": "A) Greenfield (from blank)",
        "body": "Goal: create a reusable UI/UX foundation and starter UI without business logic.\n\nDefine foundations: tokens (color/typography/spacing/radius/shadow/motion), global styles, breakpoints, layout shell.\nCreate a baseline component set: Button, Input, Select, Card, Modal, Table/List, Tabs, Toast, EmptyState.\nCreate page templates: list/detail/form/dashboard skeletons with placeholder data.\nProvide implementation notes for the target framework (CSS architecture, theming mechanism, file structure).\nOptionally run scripts/generate_output_skeleton.sh [out_root] to scaffold folders and empty templates. Default output root is ./ui-ux-spec.\n\nDeliverables:\n\nDesign tokens doc + global styles spec\nComponent catalog with variants/states/a11y\nPage templates with layout rules\nEngineering constraints (naming, CSS approach, theming)"
      },
      {
        "title": "B) Refactor existing project",
        "body": "Goal: extract current UI/UX, normalize tokens, and plan safe, incremental improvements.\n\nInventory UI sources (scan script + manual inspection).\nNormalize tokens and map existing styles to them.\nIdentify high-impact components/patterns for first pass.\nPlan migration with minimal diffs (wrappers, theme adapters, gradual replacement).\nDocument behavioral and a11y gaps to fix progressively.\n\nDeliverables:\n\nExtracted design spec (same as greenfield)\nMigration plan (phased, low-risk steps)\nComponent-by-component mapping notes"
      },
      {
        "title": "Refactor from spec (fixed flow)",
        "body": "Use this when applying an existing ui-ux-spec/ to a target project. Always work from a plan and execute step-by-step to avoid missing gaps."
      },
      {
        "title": "0) Understand the target project",
        "body": "Identify framework, styling system, component library usage, and entry points.\nConfirm constraints: UI/UX only, business logic untouched.\nKeep existing project structure unchanged unless explicitly requested."
      },
      {
        "title": "1) Build the refactor plan (required)",
        "body": "Compare spec → current project and list differences by category:\n\nTokens & global styles\nComponents (priority order)\nPatterns & pages\nA11y gaps\n\n\nDo not assume the spec folder structure matches the target project. Map by content, not by paths.\nProduce a phased plan (Phase 1 tokens, Phase 2 base components, Phase 3 pages, etc.).\nDo not proceed to edits until the plan is accepted."
      },
      {
        "title": "2) Execute phase by phase",
        "body": "Apply changes for the current phase only.\nRe-check against the spec after each phase.\nKeep diffs minimal and reversible.\nDo not restructure folders or move files; update in place."
      },
      {
        "title": "3) Summarize and verify",
        "body": "Provide a change list and remaining gaps.\nSuggest next phase only after current phase is done."
      },
      {
        "title": "Refactor prompt templates",
        "body": "Use one of the templates below to keep requests precise and plan-driven."
      },
      {
        "title": "Template A: Standard refactor",
        "body": "Please refactor the existing project based on this UI/UX spec:\n- Project path: /path/to/target-project\n- Spec path: /path/to/ui-ux-spec\n- Goal: UI/UX only (tokens, styles, components, layout), do not change business logic/APIs\n- Scope: start with global styles + base components\n- Constraints: minimal changes, small-step commits, reversible\n- Deliverables: refactor plan + actual code changes + list of impacted files"
      },
      {
        "title": "Template B: Phased refactor",
        "body": "Please refactor UI/UX in phases; only do Phase 1:\n- Project path: /path/to/target-project\n- Spec path: /path/to/ui-ux-spec\n- Phase 1: align tokens + global styles (colors/typography/spacing/radius/shadows)\n- Do not change: business logic/routing/APIs\n- Deliverables: list of changed files + alignment diff notes"
      },
      {
        "title": "Template C: Component-level refactor",
        "body": "Please align the following components to the spec while keeping business logic unchanged:\n- Project path: /path/to/target-project\n- Spec path: /path/to/ui-ux-spec\n- Component list: Button, Input, Modal, Table\n- Goal: only change styling/structure/interaction details\n- Deliverables: alignment notes per component + code changes"
      },
      {
        "title": "0) Scope and constraints",
        "body": "Confirm repo root, frameworks, and any design system packages.\nConfirm desired output format (Markdown by default).\nAsk for constraints: must-keep brand rules, target platforms, and accessibility level.\nReconfirm: exclude business logic, business rules, and domain workflows.\nDo not assume a specific frontend framework or language; adapt to the project’s stack."
      },
      {
        "title": "1) Source inventory (existing repos only)",
        "body": "Do not assume a fixed directory structure; scan results should guide where to read.\nRun the scan script and inspect results for:\n\ntokens/themes, global styles, theme providers\ncomponent libraries and local wrappers\nStorybook, docs, or visual regression tests\nassets and i18n sources"
      },
      {
        "title": "2) Foundations (tokens + global styles)",
        "body": "Document colors, typography, spacing, radius, shadows, z-index, and motion tokens.\nCapture reset/normalize, body defaults, link/form defaults, focus-visible, scrollbar."
      },
      {
        "title": "3) Layout & information architecture",
        "body": "Document breakpoints, containers, grid rules, navigation structure, and layout shells."
      },
      {
        "title": "4) Component catalog",
        "body": "For each component, capture: purpose, structure/slots, variants, states, interactions, a11y, responsive behavior, motion, and theming hooks.\nIf a third-party library is used, focus on local wrapper components and overrides."
      },
      {
        "title": "5) Page templates & composition rules",
        "body": "Extract page skeletons (list/detail/form/dashboard/etc.) and module ordering.\nCapture combined states: loading/empty/error/permission/readonly."
      },
      {
        "title": "6) Behavior & content rules",
        "body": "Capture loading and error strategies, validation patterns, undo/optimistic updates.\nCapture microcopy conventions and i18n formatting constraints."
      },
      {
        "title": "7) Package outputs",
        "body": "Produce at least:\n\nDesign tokens doc\nComponent catalog\nPage templates\n\n\nEnsure outputs are written under a dedicated folder (default ui-ux-spec/).\nUse the output structure below unless the user asks for another layout."
      },
      {
        "title": "Output structure (default)",
        "body": "This structure is a recommended documentation layout. It does not need to match the target project's directory structure, and it can be renamed or relocated (e.g., docs/ui-ux-spec/).\n\nui-ux-spec/\n  01_Foundation/\n  02_Components/\n  03_Patterns/\n  04_Pages/\n  05_A11y/\n  06_Assets/\n  07_Engineering_Constraints/"
      },
      {
        "title": "Resources",
        "body": "scripts/scan_ui_sources.sh: find candidate UI sources in a repo.\nscripts/generate_output_skeleton.sh: create the standard output folders and placeholder templates.\nreferences/design-extraction-checklist.md: detailed checklist derived from README."
      }
    ],
    "body": "Frontend Design Extractor\nOverview\n\nExtract a reusable UI/UX design spec from a frontend codebase by inventorying UI sources, documenting foundations, cataloging components, and capturing page-level patterns and behaviors. Exclude business logic and domain-specific workflows. Framework-agnostic: adapt to the actual stack in the target repo.\n\nQuick start\nConfirm mode: new project (greenfield) or refactor existing. Clarify that business logic is out of scope.\nIf existing repo: run scripts/scan_ui_sources.sh to scan the repo root (no directory layout assumptions). It uses common globs + keyword hits, and ignores common build/cache dirs and extraction output folders by default.\nOptionally: scripts/scan_ui_sources.sh <repo_root> [out_file] [extra_glob ...] or --root/--out/--ignore for nonstandard layouts.\nCreate the output folder (default ./ui-ux-spec) via scripts/generate_output_skeleton.sh and write all extraction results inside it.\nProduce outputs in the default structure (see \"Output structure\").\nModes (choose one)\nA) Greenfield (from blank)\n\nGoal: create a reusable UI/UX foundation and starter UI without business logic.\n\nDefine foundations: tokens (color/typography/spacing/radius/shadow/motion), global styles, breakpoints, layout shell.\nCreate a baseline component set: Button, Input, Select, Card, Modal, Table/List, Tabs, Toast, EmptyState.\nCreate page templates: list/detail/form/dashboard skeletons with placeholder data.\nProvide implementation notes for the target framework (CSS architecture, theming mechanism, file structure).\nOptionally run scripts/generate_output_skeleton.sh [out_root] to scaffold folders and empty templates. Default output root is ./ui-ux-spec.\n\nDeliverables:\n\nDesign tokens doc + global styles spec\nComponent catalog with variants/states/a11y\nPage templates with layout rules\nEngineering constraints (naming, CSS approach, theming)\nB) Refactor existing project\n\nGoal: extract current UI/UX, normalize tokens, and plan safe, incremental improvements.\n\nInventory UI sources (scan script + manual inspection).\nNormalize tokens and map existing styles to them.\nIdentify high-impact components/patterns for first pass.\nPlan migration with minimal diffs (wrappers, theme adapters, gradual replacement).\nDocument behavioral and a11y gaps to fix progressively.\n\nDeliverables:\n\nExtracted design spec (same as greenfield)\nMigration plan (phased, low-risk steps)\nComponent-by-component mapping notes\nRefactor from spec (fixed flow)\n\nUse this when applying an existing ui-ux-spec/ to a target project. Always work from a plan and execute step-by-step to avoid missing gaps.\n\n0) Understand the target project\nIdentify framework, styling system, component library usage, and entry points.\nConfirm constraints: UI/UX only, business logic untouched.\nKeep existing project structure unchanged unless explicitly requested.\n1) Build the refactor plan (required)\nCompare spec → current project and list differences by category:\nTokens & global styles\nComponents (priority order)\nPatterns & pages\nA11y gaps\nDo not assume the spec folder structure matches the target project. Map by content, not by paths.\nProduce a phased plan (Phase 1 tokens, Phase 2 base components, Phase 3 pages, etc.).\nDo not proceed to edits until the plan is accepted.\n2) Execute phase by phase\nApply changes for the current phase only.\nRe-check against the spec after each phase.\nKeep diffs minimal and reversible.\nDo not restructure folders or move files; update in place.\n3) Summarize and verify\nProvide a change list and remaining gaps.\nSuggest next phase only after current phase is done.\nRefactor prompt templates\n\nUse one of the templates below to keep requests precise and plan-driven.\n\nTemplate A: Standard refactor\nPlease refactor the existing project based on this UI/UX spec:\n- Project path: /path/to/target-project\n- Spec path: /path/to/ui-ux-spec\n- Goal: UI/UX only (tokens, styles, components, layout), do not change business logic/APIs\n- Scope: start with global styles + base components\n- Constraints: minimal changes, small-step commits, reversible\n- Deliverables: refactor plan + actual code changes + list of impacted files\n\nTemplate B: Phased refactor\nPlease refactor UI/UX in phases; only do Phase 1:\n- Project path: /path/to/target-project\n- Spec path: /path/to/ui-ux-spec\n- Phase 1: align tokens + global styles (colors/typography/spacing/radius/shadows)\n- Do not change: business logic/routing/APIs\n- Deliverables: list of changed files + alignment diff notes\n\nTemplate C: Component-level refactor\nPlease align the following components to the spec while keeping business logic unchanged:\n- Project path: /path/to/target-project\n- Spec path: /path/to/ui-ux-spec\n- Component list: Button, Input, Modal, Table\n- Goal: only change styling/structure/interaction details\n- Deliverables: alignment notes per component + code changes\n\nWorkflow\n0) Scope and constraints\nConfirm repo root, frameworks, and any design system packages.\nConfirm desired output format (Markdown by default).\nAsk for constraints: must-keep brand rules, target platforms, and accessibility level.\nReconfirm: exclude business logic, business rules, and domain workflows.\nDo not assume a specific frontend framework or language; adapt to the project’s stack.\n1) Source inventory (existing repos only)\nDo not assume a fixed directory structure; scan results should guide where to read.\nRun the scan script and inspect results for:\ntokens/themes, global styles, theme providers\ncomponent libraries and local wrappers\nStorybook, docs, or visual regression tests\nassets and i18n sources\n2) Foundations (tokens + global styles)\nDocument colors, typography, spacing, radius, shadows, z-index, and motion tokens.\nCapture reset/normalize, body defaults, link/form defaults, focus-visible, scrollbar.\n3) Layout & information architecture\nDocument breakpoints, containers, grid rules, navigation structure, and layout shells.\n4) Component catalog\nFor each component, capture: purpose, structure/slots, variants, states, interactions, a11y, responsive behavior, motion, and theming hooks.\nIf a third-party library is used, focus on local wrapper components and overrides.\n5) Page templates & composition rules\nExtract page skeletons (list/detail/form/dashboard/etc.) and module ordering.\nCapture combined states: loading/empty/error/permission/readonly.\n6) Behavior & content rules\nCapture loading and error strategies, validation patterns, undo/optimistic updates.\nCapture microcopy conventions and i18n formatting constraints.\n7) Package outputs\nProduce at least:\nDesign tokens doc\nComponent catalog\nPage templates\nEnsure outputs are written under a dedicated folder (default ui-ux-spec/).\nUse the output structure below unless the user asks for another layout.\nOutput structure (default)\n\nThis structure is a recommended documentation layout. It does not need to match the target project's directory structure, and it can be renamed or relocated (e.g., docs/ui-ux-spec/).\n\nui-ux-spec/\n  01_Foundation/\n  02_Components/\n  03_Patterns/\n  04_Pages/\n  05_A11y/\n  06_Assets/\n  07_Engineering_Constraints/\n\nResources\nscripts/scan_ui_sources.sh: find candidate UI sources in a repo.\nscripts/generate_output_skeleton.sh: create the standard output folders and placeholder templates.\nreferences/design-extraction-checklist.md: detailed checklist derived from README."
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/Xsir0/frontend-design-extractor",
    "publisherUrl": "https://clawhub.ai/Xsir0/frontend-design-extractor",
    "owner": "Xsir0",
    "version": "1.0.1",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/frontend-design-extractor",
    "downloadUrl": "https://openagent3.xyz/downloads/frontend-design-extractor",
    "agentUrl": "https://openagent3.xyz/skills/frontend-design-extractor/agent",
    "manifestUrl": "https://openagent3.xyz/skills/frontend-design-extractor/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/frontend-design-extractor/agent.md"
  }
}