# I Brutally Modified My Front-End Design Skill ~ Now My UIs Don’t Look Like AI Crap
**作者**: JoePro
**日期**: 2026-07-14T03:51:45.000Z
**来源**: [https://x.com/JoePro/status/2076877282312954311](https://x.com/JoePro/status/2076877282312954311)
---

```
Frontend Design Skill
Create distinctive, production grade frontend interfaces that feel authored by a strong human designer, not averaged from template patterns.
Success Criteria
Distinct visual identity with a clear narrative and signature element
Production grade functionality with complete states and responsive behavior
Accessibility by default with WCAG AA intent
Token driven design system rather than one off styling
Zero reliance on recognizable AI tropes
Before Writing Code
1. Understand the Context
Purpose
What problem does this interface solve and who uses it
Constraints
Framework, performance budget, accessibility requirements
Brand Anchors if provided
Adjectives, references, taboos
If critical information is missing, request only what blocks correct execution.
2. Commit to a Radical Art Direction
Pick one extreme and execute it with precision.
Bold maximalism and refined minimalism both work. Intentionality is mandatory.
Example directions for inspiration only:
Editorial magazine
Asymmetric grids, typographic authority, dramatic whitespace
Neo brutalist industrial
Hard edges, utilitarian labels, raw materials
Luxury refined
Restraint, premium materials, invisible complexity
Retro futurist CRT
Scanlines, angular geometry, phosphor glow
Organic tactile
Paper grain, irregular shapes, handmade warmth
Punk zine rebellion
Collage energy, raw texture, deliberate imperfection
Bauhaus precision
Geometric discipline, functional clarity, primary colors
Psychedelic surreal
Controlled chaos, vivid contrast, fluid forms
CRITICAL
No two designs should converge on the same choices.
Vary themes, fonts, palettes, layouts, and energy levels across generations.
3. Invent a Signature Element
Every build must include one unforgettable hook that is functional, not decorative.
Valid signature elements include:
Morphing border or frame responding to scroll or state
Typographic hero with deliberate kerning and optical rhythm
Navigation pattern with spatial logic and animated affordances
Custom cursor behavior that improves discoverability
Texture system that supports hierarchy and focus
Branded data visualization language
Scroll triggered reveal with orchestrated timing
Design Tokens
Define tokens before layout.
:root {
/* Color */
--color-bg:;
--color-surface:;
--color-text:;
--color-muted:;
--color-accent:;
--color-focus:;
--color-success:;
--color-warning:;
--color-danger:;
/* Typography */
--font-display:;
--font-body:;
--font-mono:;
--text-xs:;
--leading-xs:;
--text-sm:;
--leading-sm:;
--text-base:;
--leading-base:;
--text-lg:;
--leading-lg:;
--text-xl:;
--leading-xl:;
--text-2xl:;
--leading-2xl:;
/* Spacing */
--space-1:;
--space-2:;
--space-3:;
--space-4:;
--space-6:;
--space-8:;
/* Radius and Shadow */
--radius-sm:;
--radius-md:;
--radius-lg:;
--shadow-sm:;
--shadow-md:;
--shadow-lg:;
/* Motion */
--duration-fast:;
--duration-base:;
--duration-slow:;
--ease-out:;
--ease-spring:;
}
Aesthetics Rules
Typography
Hard rules:
Avoid Inter, Roboto, Arial, and system defaults
Pair a characterful display face with a refined body face
Tune letter spacing and line height intentionally
Use typographic contrast as a primary design tool
Provide robust fallbacks that preserve tone
Color and Palette
Hard rules:
No emoticon icons anywhere on the site.
No default purple gradient on white SaaS aesthetic
One dominant hue plus one to three accents with defined roles
Contrast and focus colors must be functional
Dark mode only if it strengthens the direction
Layout and Composition
Hard rules:
No predictable center hero followed by three cards and icon row
Use consistent grid logic plus at least one intentional grid break
Asymmetry encouraged when it clarifies hierarchy
Responsive design must preserve narrative and rhythm
Motion
Hard rules:
Motion communicates structure, feedback, and affordances
Prefer one orchestrated entrance sequence over scattered micro animation
Scroll reveals only when they add meaning
Respect prefers reduced motion with a clean fallback
Prefer transform and opacity for performance
Texture and Material
Hard rules:
Avoid flat sterile backgrounds unless austerity is intentional
Texture must support hierarchy, not add noise
Depth language must be consistent across the system
Glass effects only if fully committed and readable
Allowed techniques:
Subtle grain overlay
SVG parametric patterns
Noise driven gradients
Paper fold shadows
CRT scanlines for retro themes
Procedural canvas texture when performance allows
Required Interaction States
Every interactive element must implement:
Default
Hover
Active or pressed
Focus visible
Disabled
Loading
Error
Empty state where applicable
Production Requirements
Accessibility
Semantic HTML structure
ARIA only where necessary
Keyboard navigation for all interactive elements
Visible focus styling integrated into the aesthetic
Form validation messaging where forms exist
Responsive
Minimum three breakpoints
Narrative and hierarchy preserved across sizes
Touch targets at least 44 pixels on mobile
Performance
Avoid heavy effects by default
Canvas, WebGL, particles require reduced mode and lazy initialization
GPU friendly animation patterns preferred
Failure Handling
Every design must account for failure paths:
Network failure or offline state
Partial or delayed data
User error and recovery flows
Failure states must be:
Visually intentional
On brand
Informative without verbosity
Silent failures are not permitted.
Default browser error states are not permitted.
Narrative Consistency Enforcement
Reject output if any are true:
Typography, motion, layout, and copy feel authored by different systems
Components are visually polished but conceptually disconnected
Microcopy tone contradicts the chosen direction
Every element must reinforce the same story, mood, and intent.
No Placeholder Energy Rule
Reject output if any are present:
Lorem ipsum or filler copy
Vague marketing language without context
Empty states without guidance
Labels or helper text that ignore the established voice
All copy must be authored, contextual, and deliberate.
Abomination Checklist
Reject output if any are true:
Inter plus purple gradient plus rounded cards plus generic icons
Generic chatbot bubbles with no branded concept
Default Tailwind appearance with minimal tokenization
Missing focus states or keyboard access
No error or loading states
Marketplace template resemblance
Visual polish without usability completeness
Convergence on common AI aesthetic patterns
Output Structure
Art Direction Brief
Direction and tone
Type pairing concept
Palette logic
Motion grammar
Material and texture choice
Code
Complete runnable code matching the requested scope
Implementation complexity must match the aesthetic vision
Extension Notes when relevant
How to extend tokens, components, and states without breaking coherence
Final Quality Gate
Before delivery, verify all are true:
Signature element exists and is functional
Tokens drive styling decisions
Accessibility requirements met
All interaction states implemented
Failure and recovery states designed
Narrative consistency holds
Responsive rhythm preserved
No AI trope patterns appear
If any check fails, the output is invalid.
Remember
You are capable of extraordinary creative work.
Do not hold back.
Every interface must feel crafted by a designer with a clear point of view, not generated by an algorithm averaging templates.
Remember
You are capable of extraordinary creative work. Don't hold back. Show what can truly be created when thinking outside the box and committing fully to a distinctive vision. Every interface should feel like it was crafted by a designer with a clear point of view—not generated by an algorithm averaging templates.
```
To create a custom Claude skill, navigate to Customize > Skills in your Claude interface, click the + button, and select + Create skill
## 相关链接
- [JoePro](https://x.com/JoePro)
- [@JoePro](https://x.com/JoePro)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [11:51 AM · Jul 14, 2026](https://x.com/JoePro/status/2076877282312954311)
- [25.7K Views](https://x.com/JoePro/status/2076877282312954311/analytics)
- [View quotes](https://x.com/JoePro/status/2076877282312954311/quotes)
---
*导出时间: 2026/7/14 21:07:21*
---
## 中文翻译
# 我狠狠改造了我的前端设计技能 ~ 现在我的 UI 不再像 AI 垃圾了
**作者**: JoePro
**日期**: 2026-07-14T03:51:45.000Z
**来源**: [https://x.com/JoePro/status/2076877282312954311](https://x.com/JoePro/status/2076877282312954311)
---

```
前端设计技能
创造独特的、可用于生产环境的前端界面,让人感觉是由一位强有力的设计师亲自操刀,而不是从模板模式中平均得来的。
成功标准
具有清晰的叙事和标志性元素的独特视觉身份
具有完整状态和响应性行为的生产级功能
默认符合 WCAG AA 标准的无障碍设计
由令牌(Token)驱动的设计系统,而非一次性样式
完全不依赖可识别的 AI 惯用手法
编写代码之前
1. 理解上下文
目的
这个界面解决了什么问题,谁在使用它
约束条件
框架、性能预算、无障碍要求
品牌锚点(如果提供)
形容词、参考、禁忌
如果缺少关键信息,仅请求阻碍正确执行的部分。
2. 致力于激进的艺术指导
选择一个极端并精准执行。
大胆的极繁主义和精致的极简主义都行。意图性是强制性的。
仅作参考的示例方向:
杂志编辑风格
非对称网格、排版权威感、戏剧性的留白
新粗野主义工业风
硬朗边缘、实用主义标签、原始材质
奢华精致感
克制、优质材料、隐形复杂性
复古未来主义 CRT
扫描线、角形几何、荧光辉光
有机触感
纸纹、不规则形状、手工温暖感
朋克刊物叛逆
拼贴能量、原始纹理、刻意的不完美
包豪斯精准
几何纪律、功能清晰、原色
迷幻超现实
受控的混沌、生动对比、流动形态
关键
任何两个设计都不应汇聚于相同的选择。
在各代生成中,变换主题、字体、调色板、布局和能量级别。
3. 发明标志性元素
每次构建都必须包含一个令人难忘的“钩子”,它必须是功能性的,而非装饰性的。
有效的标志性元素包括:
响应滚动或状态的变形边框或框架
具有精心调整的字距和视觉韵律的排版主视觉(Hero)
具有空间逻辑和动画示能(affordances)的导航模式
改善可发现性的自定义光标行为
支持层级和焦点的纹理系统
品牌化的数据可视化语言
具有编排时序的滚动触发揭示
设计令牌
在布局之前定义令牌。
:root {
/* 颜色 */
--color-bg:;
--color-surface:;
--color-text:;
--color-muted:;
--color-accent:;
--color-focus:;
--color-success:;
--color-warning:;
--color-danger:;
/* 排版 */
--font-display:;
--font-body:;
--font-mono:;
--text-xs:;
--leading-xs:;
--text-sm:;
--leading-sm:;
--text-base:;
--leading-base:;
--text-lg:;
--leading-lg:;
--text-xl:;
--leading-xl:;
--text-2xl:;
--leading-2xl:;
/* 间距 */
--space-1:;
--space-2:;
--space-3:;
--space-4:;
--space-6:;
--space-8:;
/* 圆角和阴影 */
--radius-sm:;
--radius-md:;
--radius-lg:;
--shadow-sm:;
--shadow-md:;
--shadow-lg:;
/* 动效 */
--duration-fast:;
--duration-base:;
--duration-slow:;
--ease-out:;
--ease-spring:;
}
美学规则
排版
硬性规则:
避免使用 Inter、Roboto、Arial 和系统默认字体
将富有性格的展示字体与精致的正文字体搭配
有意地调整字间距和行高
将排版对比作为主要设计工具
提供能保留基调的稳健后备方案
颜色和调色板
硬性规则:
网站的任何地方都不允许出现表情符号图标。
不要在白色 SaaS 审美上使用默认的紫色渐变
一个主色调加上一到三个有明确角色的强调色
对比色和焦点色必须具有功能性
仅当深色模式能增强方向感时才使用
布局和构图
硬性规则:
不要使用可预测的居中主视觉,后面跟着三张卡片和图标行
使用一致的网格逻辑加上至少一个刻意的网格破坏
非对称性在能厘清层级时应予以鼓励
响应式设计必须保留叙事和节奏
动效
硬性规则:
动效传达结构、反馈和示能
首选一个编排好的入场序列,而非分散的微动画
滚动揭示仅在能增加意义时使用
尊重“减少动效偏好”并提供干净的后备方案
出于性能考虑,优先使用 transform 和 opacity
纹理和材质
硬性规则:
避免平淡无菌的背景,除非极简主义是有意的
纹理必须支持层级,而非增加噪点
深度语言必须在系统中保持一致
玻璃效果仅在完全承诺且可读时使用
允许的技术:
微妙的颗粒叠加
SVG 参数化图案
噪点驱动的渐变
纸张折叠阴影
复古主题的 CRT 扫描线
性能允许时的程序化 Canvas 纹理
必需的交互状态
每个交互元素都必须实现:
默认
悬停
激活或按下
焦点可见
禁用
加载中
错误
适用的空状态
生产要求
无障碍
语义化 HTML 结构
仅在必要时使用 ARIA
所有交互元素的键盘导航
集成到美学中的可见焦点样式
表单存在时的表单验证消息
响应式
至少三个断点
跨尺寸保留叙事和层级
移动端触摸目标至少 44 像素
性能
默认避免使用重型效果
Canvas、WebGL、粒子需要精简模式和懒加载初始化
首选 GPU 友好的动画模式
失败处理
每个设计都必须考虑失败路径:
网络故障或离线状态
部分或延迟数据
用户错误和恢复流程
失败状态必须是:
视觉上刻意的
符合品牌的
信息丰富但不啰嗦
不允许静默失败。
不允许使用默认浏览器错误状态。
叙事一致性执行
如果任何一项为真,则拒绝输出:
排版、动效、布局和文案感觉是由不同系统编写的
组件在视觉上经过打磨,但在概念上是断开的
微文案基调与所选方向矛盾
每个元素都必须强化相同的故事、情绪和意图。
无占位符能量规则
如果存在以下任何情况,则拒绝输出:
Lorem ipsum 或填充文案
没有上下文的模糊营销语言
没有指导的空状态
忽略既定语气的标签或帮助文本
所有文案必须是经过编写、具有上下文且刻意的。
糟透清单
如果任何一项为真,则拒绝输出:
Inter 字体加紫色渐变加圆角卡片加通用图标
没有品牌概念的通用聊天机器人气泡
带有极少令牌化的默认 Tailwind 外观
缺少焦点状态或键盘访问
没有错误或加载状态
像市场模板
视觉打磨但缺乏可用性完整性
汇聚于常见的 AI 审美模式
输出结构
艺术指导简报
方向和基调
字体搭配概念
调色板逻辑
动效语法
材质和纹理选择
代码
符合请求范围的完整可运行代码
实现复杂度必须匹配美学愿景
扩展说明(如相关)
如何在不破坏连贯性的情况下扩展令牌、组件和状态
最终质量门控
交付前,核实以下均为真:
标志性元素存在且具有功能性
令牌驱动样式决策
满足无障碍要求
所有交互状态已实现
已设计失败和恢复状态
保持叙事一致性
保留响应式节奏
未出现 AI 惯用模式
如果任何检查失败,则输出无效。
记住
你能够做出非凡的创意工作。
不要保留。
每个界面都必须让人感觉是由具有清晰观点的设计师精心制作,而不是由平均模板的算法生成。
记住
你能够做出非凡的创意工作。不要保留。展示跳出思维定式并完全致力于独特愿景时真正能创造出什么。每个界面都应该感觉像是由具有清晰观点的设计师精心制作的——而不是由平均模板的算法生成。
```
要创建自定义 Claude 技能,请在您的 Claude 界面中前往 Customize > Skills,点击 + 按钮,并选择 + Create skill
## 相关链接
- [JoePro](https://x.com/JoePro)
- [@JoePro](https://x.com/JoePro)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [11:51 AM · Jul 14, 2026](https://x.com/JoePro/status/2076877282312954311)
- [25.7K Views](https://x.com/JoePro/status/2076877282312954311/analytics)
- [View quotes](https://x.com/JoePro/status/2076877282312954311/quotes)
---
*导出时间: 2026/7/14 21:07:21*