What is kimi-design-skill?

Design rules for creating, changing, or reviewing Kimi-style web and mobile interfaces. They define visual tokens, component behavior, platform-specific patterns, and guidance for animation and icons.

Use it when building or reviewing Kimi-style web or mobile UI, including component states, motion, and icon choices.

It provides consistent decisions for Kimi-style interfaces instead of leaving every screen, interaction, and icon to be designed from scratch.

kimi-design-skill — Skill by XyrusCode

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods

npx agentmods add skills/xyruscode/ai-sync/kimi-design-skill

Any agent

npx skills add XyrusCode/ai-sync --skill kimi-design-skill

Clone the repo

git clone --depth 1 https://github.com/XyrusCode/ai-sync

Made for: Claude Code, Codex.

Per session 47 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,190 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. Scan, not verified.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5	$0.00047	$0.01190
Opus 5	$0.00023	$0.00595
Sonnet 5	$0.00009	$0.00238
Haiku 4.5	$0.00005	$0.00119

Measured 2d ago against content hash 9f50c710dd94, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

kimi-design-skill scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/kimi-design-skill/SKILL.md · 78 lines

How it starts

The opening of the file, as written. The whole thing — 78 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Kimi Design Skill

Use this skill when the user asks to create, modify, review, or normalize Kimi-style UI for Web or Mobile.

Progressive Read Order

Always read Level A before making UI decisions:

references/principles.md
references/tokens.json

Then read Level B based on the platform. These are mandatory, not optional:

Web UI: read references/components-web.md first, then references/web-best-practices.md.
Mobile UI: read references/components-mobile.md.

Then read conditionally based on the task:

Animation: read references/animation.md for any task that involves UI components, interactions, or state changes. This includes default, hover, pressed, focus, disabled, loading, entrance, exit, and transition states — not only obvious motion effects. Do not skip this file unless the task is purely static text or color-only adjustments with no components involved.
Icons: read references/icon-system.md when any component in the task uses icons. Prefer existing icons from the icon system. Only create a custom icon when no existing icon matches the semantic need, and the custom icon must match the stroke weight, style, and construction rules defined in icon-system.md.
Chart colors: read references/components-web/chart-colors.md when the task involves data visualization (charts, graphs, heatmaps, or any data-encoded color).

If the task involves specific Web components (Button, Modal, Dialog, Toast, etc.), read the matching file from references/components-web/*.md. Component rules are mandatory when a matching component exists — you must follow the component spec, not invent your own variant. Mobile currently has only the draft index at references/components-mobile.md; no references/components-mobile/*.md files exist yet.

If no matching component file exists, derive the new component from tokens.json and principles.md, guided by platform best practices. Do not invent arbitrary colors, radii, spacing, or styles outside the token system.

Read the full file on GitHub · 78 lines

Files

What ships with it

60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

2d ago First seen · 78 lines · 47 tokens per session scan A 9f50c710dd94

Subscribe to this mod's changes

kimi-design-skill is a skill published in the GitHub repository XyrusCode/ai-sync (2 stars, last pushed 2d ago), licensed MIT. It adds 47 tokens to every session and 1,190 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Creative and media Frontend Mobile

sceneview

Build 3D and AR apps with the SceneView SDK in Jetpack Compose, SwiftUI (iOS/macOS/visionOS via SceneViewSwift), Web (Filament.js), Flutter and React Native. Use whenever the user asks for "3D in Compose", "AR with ARCore in Compose", a model viewer, or any cross-platform 3D/AR app where the dependency is…

sceneview/sceneview · 156 tokens

app-preview-video

When the user wants to plan, script, produce, or optimize App Store Preview videos or Google Play promo videos — the autoplay videos that show in App Store/Play Store search and product pages. Use when the user mentions "App Preview", "preview video", "app store video", "promo video", "Play Store video", "video poster…

Eronred/aso-skills · 143 tokens

phone-ui-demos

把产品/知识点/文案做成"手机系统 UI 风格"的电影化网页演示动画——观众像在看一台真手机的精心编排录屏：锁屏通知、聊天、设置页、控制中心、App 界面逐镜头呈现，HyperOS/MIUI 级手感动效 + 虚拟时钟播放器，可全屏录屏当成片。只要用户提到：手机 UI 演示、手机录屏风格动画、App 演示网页、把产品做成手机里的演示、锁屏通知动画、系统 UI 风格演示页、或要求改造升级一批手机风格演示页——就用本 Skill。内容完全开放不设限：任何产品功能、课程知识、科普叙事都能转译成"手机里发生的事"。.

Unclecheng-li/AI_Animation · 194 tokens

argent-screen-recording

Record a video of an iOS simulator or Android emulator/device screen using argent MCP tools. Use when the user asks to record the screen, capture a video of a flow, interaction, or animation, produce a screen recording, or document app behavior as a video clip.

software-mansion/argent · 59 tokens

generate-images-with-firebase-ai

Use when generating or editing images from Flutter/Dart with Firebase AI Logic and a Gemini image model (Nano Banana), making the first call work, choosing Gemini Developer API vs Vertex AI, hitting quota, billing or App Check failures, getting empty or image-only responses, sending a user photo as input, controlling…

evanca/flutter-ai-rules · 84 tokens

animation-vocabulary

Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and…

MODSetter/SurfSense · 98 tokens