frontend-design

Install

Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.

npx agentmarket install skill/noobke-frontend-design

About

Use cases: design, frontend

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.

Tools

No tools found

Secrets

None asked for

Install scripts

None found

What's inside

Skill name

frontend-design

Description

需要高质量前端界面时使用 — 精致的排版、间距、动效。适合 Landing Page、App UI、Demo 原型

License

MIT

Instructions

49 lines in SKILL.md · view on GitHub

# Frontend Design — 前端设计

用艺术指导、层级、克制、图像和动效打造精致的界面。

**目标：** 做出让人感觉精心设计、高级、现代的产品界面。

## 工作模型

写代码前先定义三件事：

- **视觉主题：** 一句话描述氛围、材质和能量
- **内容规划：** hero → 支撑 → 细节 → 最终 CTA
- **交互主题：** 2-3 个改变页面感受的动效创意

## 优美默认值

- 从构图开始，不是组件
- 品牌/产品名最大声
- 文案短到几秒能扫完
- 先用留白、对齐、缩放、裁剪、对比，最后才加装饰
- 限制系统：最多两种字体，默认一个强调色
- 默认不用卡片。用区块、分栏、分割线、列表、媒体块
- 把首屏当成海报，不是文档

## Landing Page 序列

1. **Hero：** 品牌/产品 + 承诺 + CTA + 一张主导视觉
2. **支撑：** 一个具体功能/优惠/证明点
3. **细节：** 氛围、工作流、深度或故事
4. **最终 CTA：** 转化、开始、访问或联系

## App UI

默认 Linear 风格克制：
- 平静的表面层级
- 强烈的排版和间距
- 少量颜色
- 密集但可读的信息
- 最少 chrome

## 硬规则

- 默认无卡片
- 每区块只有一个主导创意
- 无填充文案
- 最多两种字体（除非产品已有强烈系统）
- 最多一个强调色（除非产品已有强烈系统）

Signals

Stars

3

Forks

0

Open issues

0

Last commit (this folder)

May 28, 2026 (5 months ago)

From GitHub (fetched Oct 24, 2026).

Details

License

MIT

Repository

github.com/noobke/reasonix-skills

First seen

Oct 24, 2026

Last checked

Oct 24, 2026

Source

GitHubgithub-graphql