Render UI from .design spec files and a starter HTML template.
npx skills add https://github.com/sonhaicoder/haiclaudeskill --skill kimi-render
Please help me install this Agent Skill. Skill: kimi-render Source: https://github.com/sonhaicoder/haiclaudeskill/tree/main/skills/kimi-render Command: npx skills add https://github.com/sonhaicoder/haiclaudeskill --skill kimi-render
Kimi-render provides a spec-first, pattern-driven approach to UI creation, ensuring consistent quality and repeatable design outputs for production-grade landing/storefront/SaaS interfaces.
Create the 3 design MD files under <project>/.design/kimi-render/ (design.md, outline.md, interaction.md), copy templates/saas-landing.html as the starter and fill in the brand content.
High-intent search queries and answers about installing and using this skill.
To build production-ready landing pages with a spec-first workflow, you create three markdown files (design.md, outline.md, interaction.md) to define the UI model, then apply pattern-driven rendering to a starter HTML template to ensure consistent visual structure.
Pattern-driven UI rendering applies repeatable structural patterns to guide content rhythm and visual hierarchy. Use this approach when building new SaaS or storefront interfaces from scratch, or refactoring an existing site that lacks a formal design system.
No, a formal design system is not required. This approach supplements frontend-design by enforcing a deterministic workflow through spec files and single-file HTML templates, allowing you to refactor existing sites without a pre-existing design system.
To start rendering a SaaS landing page, copy the single-file HTML starter template into your project, populate the .design/ directory with the required design, outline, and interaction markdown specs, then fill the template with your brand content to trigger the automated render.
Yes, the spec-first, pattern-driven rendering applies directly to building storefront pages. By leveraging the three essential spec files and repeatable render patterns, you can enforce consistent quality and repeatable design outputs for storefront interfaces.
loianeOnboard an existing Spring codebase into a spec-driven workflow with baseline and design doc.
pedroapp100Generate production-ready HTML, CSS, and React components for custom frontend designs.
TW-NLPCreate interactive HTML artifacts from React projects with Tailwind CSS and shadcn/ui.
skkarkiTranslate UI requirements into token-based frontend systems with TypeScript types.
