Skills
.Work. You
Rest

kimi-render

Community

Pattern-driven UI render for production-grade pages.

Design & Creative#template#spec-first#design-patterns#landing-page#frontend-design#ui-render
Authorsonhaicoder
Version1.0.0
Installs0

System Documentation

What problem does it solve?

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.

Core Features & Use Cases

  • 7 repeatable render patterns that guide content structure and visual rhythm.
  • 3 essential spec files (design.md, outline.md, interaction.md) to drive model-driven implementation before coding.
  • Single-file HTML templates (saas-landing.html) to bootstrap pages from brand content.
  • Auto-trigger prompts to produce high-quality UI (e.g., "render UI đẹp", "build landing").
  • Supplements frontend-design with deterministic workflow, not a replacement for design system.

Quick Start

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: kimi-render
Download link: https://github.com/sonhaicoder/haiclaudeskill/archive/main.zip#kimi-render

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.