ui-design
UI/UX and web/app interface design on codeonym's Arch workstation with Lunacy 14 (desktop, opens .fig/.sketch), Penpot and Figma in the browser, Inkscape for icons, and Eyedropper for color picking. Use when the user wants wireframes, app or website mockups, a design system (colors, type scale, spacing tokens), favicons/app icons/PWA icons, or wants to hand designs off to a Next.js/Tailwind codebase.
来源信息
- 仓库
- codeonym-org/codeonym-arch-design
- 最近来源活动
- 2026年9月25日 00:47
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 0
- 分支
- 0
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
文件资源管理器
6 个文件正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- ui-design
- description
- UI/UX and web/app interface design on codeonym's Arch workstation with Lunacy 14 (desktop, opens .fig/.sketch), Penpot and Figma in the browser, Inkscape for icons, and Eyedropper for color picking. Use when the user wants wireframes, app or website mockups, a design system (colors, type scale, spacing tokens), favicons/app icons/PWA icons, or wants to hand designs off to a Next.js/Tailwind codebase.
# UI design (Lunacy · Penpot · Inkscape)
## Toolkit on this machine
| Tool | Use it for | Launch |
|---|---|---|
| **Lunacy 14** (desktop) | Figma-style editor that works offline; opens `.fig` and `.sketch`; built-in icon/photo/illustration libraries | `lunacy` |
| **Penpot** (browser) | Open-source, SVG-native, great dev handoff (CSS/SVG inspect) | https://design.penpot.app |
| **Figma** (browser) | When a client/team already uses Figma | https://figma.com |
| **Inkscape 1.4** | Custom icons and illustrations to import as SVG | `inkscape` |
| **Eyedropper** | Pick and convert colors (HEX/RGB/HSL/OKLCH) from anywhere on screen | `eyedropper` |
| **Fonts** | Inter, IBM Plex, Source Sans/Serif, Roboto, Fira, JetBrains Mono installed | see `typography` skill |
## Scripts
| Script | What it does |
|---|---|
| `check.sh` | Verifies Lunacy, Inkscape, Eyedropper, UI fonts; checks that Penpot/Figma are reachable |
| `icon-set.sh <icon.svg> [outdir]` | Generates favicon.ico, favicon.svg, apple-touch-icon, PWA icons (192/512 + maskable), Android/desktop sizes, and a `site.webmanifest` + HTML snippet |
| `palette.sh <#hex> [name]` | Builds a 50–950 tint/shade scale from one brand color → CSS variables, Tailwind v4 `@theme` block, and a swatch PNG |
## Guides
- `references/ui-workflow.md` — brief → wireframe → design system → hi-fi → prototype → handoff.
- `references/design-tokens.md` — spacing/type/radius scales and how to carry them into Next.js + Tailwind.
## Rules of thumb
1. Start grayscale and low-fi; add brand color only after layout and hierarchy work.
2. 8-pt spacing grid (4 for tight UI), 12-column layout on desktop, 4 columns on mobile.
3. Build components (buttons, inputs, cards) with variants before assembling screens.
4. Every text/background pair ≥ 4.5:1 contrast (3:1 for large text). Check with the contrast tool in Lunacy/Penpot.
5. Design mobile (390 px) and desktop (1440 px) frames for every key screen.
在 GitHub 查看