design-brief

name

design-brief

description

Generate a comprehensive design brief for Astro.js website generation from scraper output and design tokens. Use this skill when you have scraped website data (structure.json, schema.json, content.json) and design tokens, and need to create a section-by-section blueprint for each page. Works with Shadcn Skill to understand available components and composition patterns. Always use this skill when the user mentions "design brief", "site blueprint", "page planning", "component mapping", or needs to bridge scraped content to code generation.

Design Brief

Generate a comprehensive design brief that bridges scraped website content to Astro.js code generation. The brief defines page structure, sections, components, and content mapping.

When to use this skill

Use this skill when you have:

• Scraper output (structure.json, schema.json, content.json)
• Extracted design tokens (design-tokens.json)
• Need to plan page layouts and component usage

Your task

Generate a design-brief.json file that serves as a blueprint for code generation.

Output structure

Save as design-brief.json:

{
  "pages": [
    {
      "page": "index",
      "pageType": "homepage",
      "title": "Home"