frontend-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

프론트엔드 디자인

前端设计

[프론트엔드 디자인 스킬 활성화]

[前端设计技能激活]

목표

目标

탁월한 디자인 품질을 갖춘 독창적이고 프로덕션 수준의 프론트엔드 인터페이스를 생성함. 웹 컴포넌트, 페이지, artifact, 포스터, 애플리케이션 구축 시 활용하며, 일반적인 AI 생성 심미성을 피하고 창의적이고 세련된 코드와 UI 디자인을 제공함.

创建具有卓越设计品质、独创性的生产级前端界面。适用于Web组件、页面、制品、海报、应用程序的构建，避免常见的AI生成式美感，提供富有创意且精致的代码与UI设计。

활성화 조건

激活条件

사용자가 웹 컴포넌트, 페이지, 대시보드, React 컴포넌트, HTML/CSS 레이아웃 구축 또는 웹 UI 스타일링/미화 요청 시 활성화.

当用户请求构建Web组件、页面、仪表盘、React组件、HTML/CSS布局，或进行Web UI样式设计/美化时激活。

워크플로우

工作流程

중요: 추가적인 파일 탐색이나 에이전트 위임 없이, 아래 디자인 원칙을 즉시 프롬프트로 출력하여 프론트엔드 작업에 적용하세요.

重要提示：无需额外的文件搜索或代理委托，请立即将以下设计原则作为提示语输出并应用到前端工作中。

Design Thinking

设计思维

코딩 전에 컨텍스트를 이해하고 대담한 심미적 방향을 결정:

목적: 이 인터페이스는 어떤 문제를 해결하는가? 누가 사용하는가?
톤: 극단적 선택 — 극도로 미니멀, 극도로 맥시멀, 레트로 퓨처리스틱, 유기적/자연적, 럭셔리/정제, 장난스러운/토이 같은, 에디토리얼/매거진, 브루탈리스트/원시적, 아르데코/기하학적, 소프트/파스텔, 산업적/실용적 등. 무수히 많은 풍미가 있으므로 이를 영감으로 사용하되 심미적 방향에 진정으로 부합하는 디자인을 고안.
제약: 기술 요구사항 (프레임워크, 성능, 접근성).
차별화: 무엇이 이것을 잊을 수 없게 만드는가? 사람들이 기억할 한 가지는 무엇인가?

핵심: 명확한 개념적 방향을 선택하고 정밀하게 실행. 대담한 맥시멀리즘과 정제된 미니멀리즘 모두 작동함 — 핵심은 의도성이며 강렬함이 아님.

그런 다음 작동하는 코드(HTML/CSS/JS, React, Vue 등)를 구현. 코드는 다음을 만족:

프로덕션 수준이며 기능적
시각적으로 인상적이며 기억에 남음
명확한 심미적 관점을 가진 응집력 있는 디자인
모든 세부 사항이 세심하게 정제됨

编码前先理解上下文，确定大胆的美学方向：

目的: 该界面要解决什么问题？面向哪些用户？
风格: 做出极致选择——极简风、极繁风、复古未来风、有机/自然风、奢华/精致风、趣味/玩具风、编辑/杂志风、粗野主义/原始风、装饰艺术/几何风、柔和/马卡龙风、工业/实用风等。风格种类繁多，可从中汲取灵感，但需设计出真正契合选定美学方向的作品。
约束: 技术要求（框架、性能、可访问性）。
差异化: 是什么让这个界面令人难忘？用户会记住的核心点是什么？

核心: 选择明确的概念方向并精准执行。大胆的极繁主义与精致的极简主义均适用——关键在于设计的目的性，而非盲目追求强烈视觉冲击。

随后实现可运行的代码（HTML/CSS/JS、React、Vue等）。代码需满足以下要求：

达到生产级标准且功能完备
视觉上具有冲击力且令人难忘
具备明确美学视角的连贯设计
所有细节均经过精心打磨

프론트엔드 심미성 가이드라인

前端美学指南

다음에 집중:

重点关注以下方面：

타이포그래피

排版

아름답고 독특하며 흥미로운 폰트를 선택. Arial이나 Inter 같은 일반적인 폰트를 피하고, 프론트엔드의 심미성을 향상시키는 독창적인 선택을 선호. 예상치 못한, 개성 있는 폰트 선택. 독특한 디스플레이 폰트와 정제된 본문 폰트를 페어링.

选择美观、独特且富有吸引力的字体。避免使用Arial、Inter等常见字体，优先选择能提升前端美感的独创性字体。挑选出人意料、极具个性的字体，将独特的标题字体与精致的正文字体进行搭配。

색상과 테마

色彩与主题

응집력 있는 심미성에 전념. CSS 변수로 일관성 유지. 주요 색상과 날카로운 강조색이 소심하고 균등하게 분포된 팔레트를 능가함.

专注于连贯的美学风格。使用CSS变量保持一致性。采用主色调与醒目的强调色搭配，超越保守、均衡分布的配色方案。

모션

动效

효과와 마이크로 인터랙션에 애니메이션 사용. HTML의 경우 CSS 전용 솔루션 우선. React의 경우 가능하면 Motion 라이브러리 사용. 고임팩트 순간에 집중: 단계적 표시(animation-delay)가 있는 잘 조율된 페이지 로드가 흩어진 마이크로 인터랙션보다 더 많은 즐거움을 생성. 스크롤 트리거와 놀라움을 주는 호버 상태 사용.

在效果与微交互中运用动画。对于HTML，优先使用纯CSS解决方案。对于React，尽可能使用Motion库。聚焦高影响力瞬间：带有分步显示（animation-delay）的协调页面加载，比零散的微交互更能带来愉悦感。使用滚动触发效果与令人惊喜的悬停状态。

공간 구성

空间布局

예상치 못한 레이아웃. 비대칭. 겹침. 대각선 흐름. 그리드를 깨는 요소. 넉넉한 네거티브 스페이스 또는 통제된 밀도.

采用出人意料的布局。非对称、重叠、对角线流、打破网格的元素。充足的留白或可控的内容密度。

배경과 시각적 디테일

背景与视觉细节

단색 기본값 대신 분위기와 깊이를 생성. 전체 심미성과 일치하는 맥락적 효과와 텍스처 추가. 그라디언트 메시, 노이즈 텍스처, 기하학적 패턴, 레이어드 투명도, 극적인 그림자, 장식적 테두리, 커스텀 커서, 그레인 오버레이 같은 창의적 형태 적용.

替代纯色背景，营造氛围与深度。添加与整体美学风格一致的情境化效果与纹理。运用渐变网格、噪点纹理、几何图案、分层透明度、戏剧性阴影、装饰性边框、自定义光标、颗粒叠加等创意形式。

피해야 할 일반적인 AI 심미성

需避免的常见AI生成式美感

절대 사용 금지:

과도하게 사용된 폰트 패밀리 (Inter, Roboto, Arial, 시스템 폰트)
진부한 색상 조합 (특히 흰색 배경 위의 보라색 그라디언트)
예측 가능한 레이아웃과 컴포넌트 패턴
맥락 특정 개성이 부족한 쿠키 커터 디자인

창의적으로 해석하고 맥락에 진정으로 설계된 느낌을 주는 예상치 못한 선택을 하세요. 어떤 디자인도 동일해서는 안 됩니다. 라이트 테마와 다크 테마, 다양한 폰트, 다양한 심미성 간을 변화시키세요. 절대 공통적인 선택(예: Space Grotesk)으로 수렴하지 마세요.

중요: 구현 복잡도를 심미적 비전에 맞추세요:

맥시멀리스트 디자인 → 광범위한 애니메이션과 효과가 포함된 정교한 코드 필요
미니멀리스트 또는 정제된 디자인 → 절제, 정밀함, 간격/타이포그래피/미묘한 디테일에 대한 신중한 주의 필요

우아함은 비전을 잘 실행하는 것에서 나옵니다.

绝对禁止:

过度使用的字体家族（Inter、Roboto、Arial、系统字体）
老套的配色组合（尤其是白色背景搭配紫色渐变）
可预测的布局与组件模式
缺乏情境化个性的模板化设计

请做出富有创意、真正贴合情境的出人意料的选择。所有设计不应千篇一律。在亮色主题与暗色主题、不同字体、多样美学风格之间灵活切换。绝对不要局限于常见选择（如Space Grotesk）。

重要提示: 根据美学愿景调整实现复杂度:

极繁主义设计 → 需要包含大量动画与效果的精细代码
极简主义或精致设计 → 需要克制、精准，注重间距/排版/细微细节

优雅源于对愿景的完美执行。

MUST 규칙

必须遵守的规则

#	규칙
1	코딩 전에 명확한 심미적 방향 결정 (Design Thinking 섹션 참조)
2	독창적이고 맥락 특정적인 폰트 선택 (Inter, Arial, Roboto 금지)
3	프로덕션 수준의 작동하는 코드 구현
4	심미적 비전에 맞춰 구현 복잡도 조정
5	모든 세부 사항에 세심한 주의 (타이포그래피, 색상, 모션, 공간, 배경)

#	规则
1	编码前确定明确的美学方向（参考Design Thinking章节）
2	选择独特且贴合情境的字体（禁止使用Inter、Arial、Roboto）
3	实现生产级可运行代码
4	根据美学愿景调整实现复杂度
5	关注所有细节（排版、色彩、动效、空间、背景）

MUST NOT 규칙

绝对禁止的规则

#	금지 사항
1	일반적인 AI 생성 심미성 사용 금지 (보라색 그라디언트 + 흰 배경, 시스템 폰트 등)
2	맥락 없는 쿠키 커터 디자인 금지
3	심미적 방향 없이 코딩 시작 금지
4	동일한 폰트(Space Grotesk 등)로 수렴 금지

#	禁止事项
1	禁止使用常见AI生成式美感（如紫色渐变+白色背景、系统字体等）
2	禁止使用脱离情境的模板化设计
3	禁止在未确定美学方向的情况下开始编码
4	禁止局限于单一字体（如Space Grotesk）