blocksmithv1.vercel.app

{
  "name": "propose_component",
  "kind": "act",
  "impl": "imperative",
  "description": "Put a component or full page in front of the user on the page they are reading, rendered in this design system's own tokens, and get back the governance verdict. Use this instead of only printing code in chat — the user should see the thing, not the markup. Earlier proposals are kept: each new one becomes a version the user can revisit, view as code, or download from the full-page view, so propose freely rather than editing one blob in place.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "code": {
        "type": "string",
        "description": "The component markup to show."
      },
      "intent": {
        "type": "string",
        "description": "One line on what you built, e.g. \"pricing card\"."
      }
    },
    "required": [
      "code"
    ]
  },
  "page": "/wiki"
}

{
  "name": "propose_design_change",
  "kind": "act",
  "impl": "imperative",
  "description": "Propose a change to the design system itself — add or edit a colour token, add a do/don't rule, revise a component's guidance. The change is staged for the human to approve; you cannot apply it. Use this when the user wants the system changed, not code written against it.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "blockId": {
        "type": "string",
        "description": "What to change: \"guidelines\", \"token:color:<name>\", \"component:<id>\", \"agent-guide\"."
      },
      "summary": {
        "type": "string",
        "description": "One line a human will read, e.g. \"Add a warning colour\"."
      },
      "updatedData": {
        "type": "string",
        "description": "JSON for that block. guidelines takes {dos:[],donts:[]}; a colour takes {name,value,role}."
      },
      "rationale": {
        "type": "string",
        "description": "Why this is the right change, in one or two sentences."
      },
      "create": {
        "type": "string",
        "description": "Pass \"true\" when this adds a block that does not exist yet, such as a new colour token."
      }
    },
    "required": [
      "blockId",
      "summary",
      "updatedData"
    ]
  },
  "page": "/wiki"
}

{
  "name": "get_current_context",
  "kind": "answer",
  "impl": "imperative",
  "description": "See what the user is looking at right now: which design system is open in their browser and which page of it. Call this first so your answer applies to their actual screen rather than a guess.",
  "inputSchema": {
    "type": "object",
    "properties": {}
  },
  "page": "/wiki"
}

{
  "name": "get_governance_rules",
  "kind": "answer",
  "impl": "imperative",
  "description": "Get the active design system's rules: token palette, do's, don'ts, and component count. Call this before writing or changing any UI code so the result matches the system instead of guessing at values.",
  "inputSchema": {
    "type": "object",
    "properties": {}
  },
  "page": "/dashboard"
}

{
  "name": "list_components",
  "kind": "answer",
  "impl": "imperative",
  "description": "List what this design system offers, what is deprecated, and what it has deliberately ruled out. Call this before proposing any component so you build with what exists instead of inventing something the system does not have.",
  "inputSchema": {
    "type": "object",
    "properties": {}
  },
  "page": "/dashboard"
}

{
  "name": "check_capability",
  "kind": "answer",
  "impl": "imperative",
  "description": "Ask whether this design system allows a given UI pattern before you build it. Answers available, preferred, deprecated, or ruled out — with what to use instead. Call this whenever you are about to reach for a pattern you have not confirmed exists, rather than inventing one.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "pattern": {
        "type": "string",
        "description": "The pattern you want to use, e.g. \"Tooltip\" or \"Modal\"."
      }
    },
    "required": [
      "pattern"
    ]
  },
  "page": "/dashboard"
}

{
  "name": "list_presets",
  "kind": "answer",
  "impl": "imperative",
  "description": "List the design systems available to build against. Use this when the user has no system of their own, or wants to switch which one governs their work.",
  "inputSchema": {
    "type": "object",
    "properties": {}
  },
  "page": "/dashboard"
}

{
  "name": "capture_site_design",
  "kind": "act",
  "impl": "imperative",
  "description": "Read a public website's design decisions — colours, typefaces, radii, spacing, type sizes — and save them as a design system you can then build against. Use this when the user has no design system of their own and wants to start from a site they like. The result is a draft: it has no components and its roles are inferred.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "url": {
        "type": "string",
        "description": "Public page to read, e.g. \"https://stripe.com\"."
      }
    },
    "required": [
      "url"
    ]
  },
  "page": "/dashboard"
}

{
  "name": "export_skill",
  "kind": "act",
  "impl": "imperative",
  "description": "Turn the active design system into a skill file a coding agent can load, so it writes compliant UI in an editor where these tools are not reachable. Returns a summary and a URL to fetch the file. Use when the user wants their agent to follow this system outside this page.",
  "inputSchema": {
    "type": "object",
    "properties": {}
  },
  "page": "/dashboard"
}

{
  "name": "check_governance",
  "kind": "answer",
  "impl": "imperative",
  "description": "Check UI code against the active design system: off-token colors, off-scale spacing, font sizes and radii, banned patterns like gradients or shadows, and Tailwind classes that resolve to non-token values. Returns each violation with its line and the value to use instead. Call before showing generated UI to the user, and again after fixing.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "code": {
        "type": "string",
        "description": "The component source to check."
      }
    },
    "required": [
      "code"
    ]
  },
  "page": "/dashboard"
}

{
  "name": "fix_violations",
  "kind": "act",
  "impl": "imperative",
  "description": "Apply every mechanical fix the design system can make to a piece of code — off-token colours with a near match, off-scale spacing, type sizes, radii, and Tailwind classes. Returns the corrected code plus anything that still needs a human decision. Use after check_governance rejects something.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "code": {
        "type": "string",
        "description": "The component source to repair."
      }
    },
    "required": [
      "code"
    ]
  },
  "page": "/dashboard"
}

{
  "name": "explain_violation",
  "kind": "act",
  "impl": "imperative",
  "description": "Explain why a specific color value violates the design system and which token to use instead. Use this when the user asks why a change was rejected.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "hex": {
        "type": "string",
        "description": "The rejected color, e.g. \"#3b82f6\"."
      }
    },
    "required": [
      "hex"
    ]
  },
  "page": "/dashboard"
}

{
  "name": "check_component",
  "kind": "answer",
  "impl": "imperative",
  "description": "Check proposed colors against one named component's governance, returning its do's, don'ts, and any deviations. Use this when changing a specific component rather than checking a whole file.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "component": {
        "type": "string",
        "description": "Component name, e.g. \"Button\"."
      },
      "colors": {
        "type": "string",
        "description": "Comma-separated hex colors to check, e.g. \"#fff,#1a1a1a\"."
      }
    },
    "required": [
      "component"
    ]
  },
  "page": "/dashboard"
}

{
  "name": "figma_token_drift",
  "kind": "act",
  "impl": "imperative",
  "description": "Figma says X, code says Y. Pass Figma's variables (the output of get_variable_defs, as an object or JSON string) and get back which tokens agree with this design system, which differ in value, which were renamed, and which exist on one side only. Use it before building from a Figma frame, and to answer whether a file and its code have drifted apart.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "variables": {
        "type": "object",
        "description": "Figma variables: {\"Color/Brand\": \"#4c6ee6\", ...} or [{name, value, type}]. A JSON string is accepted."
      },
      "designContextCode": {
        "type": "string",
        "description": "Optional: raw get_design_context code, to recover de-facto tokens when the file has no variables."
      },
      "fileKey": {
        "type": "string",
        "description": "Optional Figma file key, for the report's provenance."
      }
    }
  },
  "page": "/dashboard"
}

{
  "name": "audit_page_styles",
  "kind": "act",
  "impl": "imperative",
  "description": "The page says X, the system says Y. Pass what a live page actually paints — its colours with usage counts, typefaces and radii, as collected by the BlockSmith in-page script — and get back how much of it is on-system: exact token matches, near misses with the token to use instead, and values the system has no answer for.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "styles": {
        "type": "object",
        "description": "{url, colors:[{value,count,role}], fonts:[...], radii:[...]} as collected from the page. A JSON string is accepted."
      }
    },
    "required": [
      "styles"
    ]
  },
  "page": "/dashboard"
}

{
  "name": "audit_site",
  "kind": "act",
  "impl": "imperative",
  "description": "Judge any public website against this design system, from its address alone. Reads what the page actually paints and reports how much is on-system, which values are near misses with the token to use instead, and which have no token at all. Use when the user asks whether a site or a page of their own is on-brand.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "url": {
        "type": "string",
        "description": "Public page to judge, e.g. \"https://stripe.com\"."
      }
    },
    "required": [
      "url"
    ]
  },
  "page": "/dashboard"
}

{
  "name": "check_component",
  "kind": "answer",
  "impl": "imperative",
  "description": "Check proposed colors against one named component's governance, returning its do's, don'ts, and any deviations. Use this when changing a specific component rather than checking a whole file.",
  "inputSchema": {
    "type": "object",
    "properties": {
      "component": {
        "type": "string",
        "description": "Component name, e.g. \"Button\".",
        "enum": [
          "Navigation Link",
          "Primary Action Button",
          "Secondary Action Button",
          "Ghost Button",
          "Social Sign-Up Button",
          "Default Card",
          "Elevated Card",
          "Callout Card",
          "Text Input Field"
        ]
      },
      "colors": {
        "type": "string",
        "description": "Comma-separated hex colors to check, e.g. \"#fff,#1a1a1a\"."
      }
    },
    "required": [
      "component"
    ]
  },
  "page": "/wiki?doc=apollo.md"
}