Smartisan UI

用 Smartisan OS（锤子科技 / 坚果手机）的 UI 风格做前端界面：轻拟物、细腻纵向渐变、极细描边、柔和投影与内凹阴影、灰阶为主 + 低饱和蓝强调 + 锤子红品牌色。当用户提到 Smartisan、锤子、锤子风格、坚果 OS、Smartisan OS、老罗/罗永浩那种拟物风、"像锤子手机一样的 UI"，或要求把网页/组件/App 原型做成这种风格时使用。适用于网页（HTML/CSS/Tailwind/任意前端框架）和 Flutter。内含完整的 Figma《Smartisan OS UI Kit (Unofficial)》（17 页、全部组件和变体）提取出的 token、组件规格、可直接引用的 CSS、Tailwind preset、图标和参考截图，并经 Smartisan R2 真机校对；还包括从 Smartisan OS 框架资源和社区 1:1 复刻应用中整理的交互层（按压时序、转场、主体不动部件分层过渡的组件编排、开关拖拽、右滑删除、回弹、滚轮、字母索引）和官方 6dp 间距 / 字号 / 文字色体系。

33 stars 2 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add lemonteaau/smartisan-ui-skill --skill smartisan-ui

Manual install

git clone --depth 1 https://github.com/lemonteaau/smartisan-ui-skill.git /tmp/smartisan-ui-skill
mkdir -p ~/.claude/skills
cp -r /tmp/smartisan-ui-skill/. ~/.claude/skills/smartisan-ui

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Smartisan OS UI 风格

来源：
- Figma 社区文件 [Smartisan OS UI Kit (Unofficial)](https://www.figma.com/community/file/1419385240874679870)，作者 Paix Chan，CC BY 4.0，基于 Smartisan R2 上的 Smartisan OS 8。所有数值都从 Figma 节点里读出，17 页、每个组件和每个变体都覆盖到了。
- 在一台真机 Smartisan R2（Smartisan OS 8.5.3）上用 adb 校对：屏幕 dp 宽度、字体、真实页面底纹、App Bar 阴影、列表图标颜色等，文档里标 **[R2]**。
- 在同一台 R2 上逐像素测量、60fps 录屏抽帧得到的**交互、动效、间距、分隔线**，以及各系统应用的取色方式，见 `references/device-behavior.md`。
- Smartisan OS 8 **框架资源**（官方间距、字号、文字色、转场时长和插值器）和社区 1:1 重写的锤子音乐 / 天气 / 时钟里校准过的**手势与动效参数**，见 `references/motion.md`。

## 文件

| 文件 | 用途 |
|---|---|
| `assets/smartisan.css` | 全部 token（CSS 变量）+ 全部组件类 `.s-*`。**做网页时优先直接引用这一份** |
| `assets/smartisan.js` | 交互层（无依赖）：Android 式按压时序、开关拖拽、右滑删除、真滚轮、橡皮筋回弹、页面栈横推（含标题栏分阶段转场）、全屏页上推、对话框 / 底部菜单进出场、字母索引条、`Smartisan.toast()` |
| `assets/flutter/*.dart` | **Flutter 版**（只依赖 Flutter SDK）：转场与动效常量（`smartisan_motion.dart`：`SPageRoute`、`SModalPageRoute`、`SDialogRoute`、`SMotion`）、框架层组件（`smartisan_interaction.dart`：`SSwipeRow`、`SQuickBar`、`SEmptyState`、`SSectionTitle`、`SCheck`、`SRoundEditButton`）、Kit token（`smartisan_theme.dart`）、亮/暗色板 + 强调色（`smartisan_palette.dart`、`smartisan_accent.dart`）、整套 `ThemeData`（`smartisan_material_theme.dart`）、23 个矢量图标、全部组件（明暗自适应）、真机补充组件（分段 Tab、品牌栏、条纹底、分区带、带按下态的列表行、动效）。用法见 `references/flutter.md` |
| `assets/flutter/glyphs/` | Flutter 图标字体 `SGlyphs`：166 个锤子风格实心字形（Phosphor Icons，MIT），用来替换 Material 线框图标 |
| `assets/demo.html` | 整套 Kit 的 1:1 复刻：17 页，每个变体都有，外加一块"Real device"展示板。拿不准 HTML 结构时照抄这里 |

Read the full skill on GitHub

Details

Skill name: smartisan-ui
Repository: lemonteaau/smartisan-ui-skill
Repo updated: 16 October 2026

FAQ

What does the Smartisan UI skill do?

How do I install the Smartisan UI skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add lemonteaau/smartisan-ui-skill --skill smartisan-ui. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Smartisan UI popular?

It lives in lemonteaau/smartisan-ui-skill, which has 33 GitHub stars and 2 forks.

Related skills

Roblox Vfx Animation

adnvli/vfxskill

Use for any Roblox visual effect or animation work through a Roblox Studio MCP - particles, beams, trails, slashes, hits, explosions, spells, auras, abilities, combat effects, camera shake, VFX textures and flipbooks, and R15/R6/creature animations (attacks, idles, walks, runs). Load before building or tuning any effect or animation, even a small one.

Frontend & Design

SAAS Onboarding Diagnosis

Daqi029/saas-onboarding-diagnosis

Inspect and diagnose a SaaS product's new-user onboarding, activation path, candidate Aha Moment, time to value, blank states, setup friction, guidance, invitation timing, and measurement plan. Use when a founder or product team wants to improve first-use completion, activation, or early retention, or review onboarding before launch. Do not use for employee onboarding, generic UX review, or full-funnel growth diagnosis.

Frontend & Design

Home Icon Motion

youwenjiujiu/home-icon-motion

Generate, package, and integrate the polished cinematic Home/house navigation icon motion as standalone HTML/video or as an inline Web Component with React and Vue wrappers. Use when Codex is asked to animate a Home icon, house icon, homepage navigation control, active Home tab, or integrate the established construct-and-illuminate Home treatment into an existing frontend. Do not use for Delete, Search, or other icon meanings.

Frontend & Design

Blcaptain Ppt Skill

dososo/blcaptain-ppt-skill

把一个目标/主题/文章/截图/数据转成有观点、有节奏、有视觉约束的单文件 HTML 演示（网页 PPT、科技战报、产品拆解、行业观察、路演/发布会 deck、社媒可传播长图）。**7 套各锚定公认设计体系的视觉人格**——技术崇高派 Technical Sublime（工程冷光·技术战报/算力）/ 构成主义 Constructivism（宣言/号召）/ 信息·数据设计（Tufte·数据/图表）/ 判断震慑极简 Luxury（高端品牌/判断）/ De Stijl 新造型（标准/秩序）/ 编辑主义 Editorial（衬线·深度观察）/ 演示禅 Zen（暗墨·思想/品牌 keynote）——用户可指定，否则按内容自动判选并透明告知。token + validator 机检（P0/P1/P2）+ 32 维审计**机器强制设计一致性**；反伪造（不造数据/logo/截图/来源·示意标注）；字体本地子集；图按角色路由（默认 CSS/SVG·要图先探测生图环境）。Generates single-file HTML decks with 7 design-system-anchored visual personas, a semantic layout grammar, locked design tokens, evidence-grading, machine validation (P

Frontend & Design

Copy Thief

thalesholleben/copy-thief

Escreve e revisa copy persuasiva de alta conversão para páginas de vendas (landing pages), advertoriais/pre-sell e VSLs, com foco em tráfego frio vindo de Ads (Meta e Google) para produtos e serviços digitais. Use quando o pedido envolver: escrever ou revisar uma página de vendas, landing page, sales letter, carta de vendas, copy de oferta, VSL, advertorial, pré-venda, headline, CTA, ou "vender no tráfego frio". O workflow é sempre diagnóstico → estrutura aprovada pelo usuário → copy. Idioma de saída padrão: PT-BR (mercado brasileiro).

Frontend & Design

Sveltekit Svelte5 Tailwind Skill

claude-skills/sveltekit-svelte5-tailwind-skill

Comprehensive integration skill for building sites with SvelteKit 2, Svelte 5, and Tailwind CSS v4

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.