Add skill: generate custom styles from app design system

Abierto
#19 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
45/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
css, typescript
Área
design, frontend

Línea de trabajo

Start with the existing style definitions in renderer.ts and widget-renderer.tsx, then inspect apps/mcp/skills/, server.ts, assemble_document, and the README. Trace how MCP prompts and theme data are registered and applied. Done means the new skill and prompt are available, overrides can be applied by assemble_document, and the README includes a usage example.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Summary

Create a new agent 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
Lenguaje dominante
TypeScript
Estrellas
1.6k
Forks
202
Sin PR fusionados en 30 d

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de CopilotKit/OpenGenerativeUI

Todos los issues de CopilotKit/OpenGenerativeUI

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.