Skip to content

Add skill: generate custom styles from app design system #19

@GeneralJerel

Description

@GeneralJerel

Summary

Create a new MCP skill that analyzes the host application's existing styles (colors, typography, spacing, borders, etc.) and generates matching CSS/design tokens for UI component generation. This would allow the assemble_document tool to produce widgets that visually match the consuming application rather than using the default OpenGenerativeUI theme.

Motivation

Currently, renderer.ts ships a hardcoded design system (forked from widget-renderer.tsx). When users integrate the MCP server into their own apps, the generated widgets look like OpenGenerativeUI — not like their app. A style-extraction skill would close this gap by letting the agent adapt generated UI to the host app's look and feel.

Proposed approach

  • Add a new skill file (skills/custom-styles-skill.txt) with instructions for:
    • Extracting CSS custom properties, Tailwind config, or design tokens from the host app
    • Mapping extracted values to the OpenGenerativeUI CSS variable schema (--color-*, --font-*, --border-radius-*)
    • Generating a theme override block that assemble_document can merge with the base styles
  • Expose the skill via a new MCP prompt (e.g. customize_theme)
  • Optionally extend the assemble_document tool to accept a themeOverrides parameter

Acceptance criteria

  • New skill file in apps/mcp/skills/
  • Registered as an MCP prompt in server.ts
  • Agent can read a target app's styles and produce a compatible CSS override
  • assemble_document supports applying the override
  • README updated with usage example

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions