ワンクリックでManusで任意のスキルを実行

frontend-design

スター6

フォーク0

更新日2026年4月25日 04:48

创建具有辨识度、production-grade 且高设计质量的前端界面。当用户要求构建 web components、pages、artifacts、posters 或 applications 时使用该 skill，例如 websites、landing pages、dashboards、React components、HTML/CSS layouts，或需要 styling / beautifying 任意 web UI 时。生成有创意、精致且避免通用 AI 审美的代码和 UI 设计。

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

Tx1207

Tx1207/hello-scholar

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

设计思考

编码前，先理解上下文并选择一个 bold 的美学方向：

Purpose：这个界面解决什么问题？谁使用它？
Tone：选择一种明确极端风格：brutally minimal、maximalist chaos、retro-futuristic、organic/natural、luxury/refined、playful/toy-like、editorial/magazine、brutalist/raw、art deco/geometric、soft/pastel、industrial/utilitarian 等。它们只是灵感，最终设计要忠于你选择的美学方向。
Constraints：技术要求（framework、performance、accessibility）。
Differentiation：是什么让它令人难忘？用户会记住哪一个点？

如果项目已有设计约束，优先级为当前 plan / PRD 的 UI 决策，其次是项目级 hello-scholar/DESIGN.md 或等价设计文档，最后才是本 skill 的通用美学建议。不要为了展示技巧覆盖已有产品语言。

CRITICAL：选择清晰的概念方向并精确执行。大胆的 maximalism 和克制的 refined minimalism 都可以成立，关键是 intentionality，而不是 intensity。

然后实现工作代码（HTML/CSS/JS、React、Vue 等），要求：

Production-grade 且功能可用
视觉上有冲击力且令人记住
有清晰审美立场并保持整体一致
每个细节都经过精修

前端美学指南

重点关注：

Typography：选择美观、独特、有趣的字体。避免 Arial、Inter 等通用字体；优先选择能提升前端美学的、有性格的字体。用 distinctive display font 搭配精致正文字体。
Color & Theme：坚持统一审美。使用 CSS variables 保持一致性。强主色 + 锐利点缀通常比平均分布的胆怯配色更好。
Motion：用 animations 表达效果与 micro-interactions。HTML 优先使用 CSS-only 方案。React 中如可用则使用 Motion library。聚焦高影响力时刻：一次经过编排的 page load 和 staggered reveals（animation-delay）比零散微交互更有惊喜。使用出人意料的 scroll-triggering 和 hover states。
Spatial Composition：使用非预期布局、不对称、重叠、斜向流动、打破网格的元素。可以选择大面积留白，也可以选择受控密度。
Backgrounds & Visual Details：营造氛围和深度，不要默认纯色背景。添加与整体审美匹配的上下文效果和纹理。可使用 gradient meshes、noise textures、geometric patterns、layered transparencies、dramatic shadows、decorative borders、custom cursors 和 grain overlays 等创意形式。

绝不要使用通用 AI 生成审美，例如过度使用的字体族（Inter、Roboto、Arial、system fonts）、陈词滥调配色（尤其白底紫色渐变）、可预测布局和组件模式，以及缺乏上下文个性的 cookie-cutter design。

要创造性解读需求，做出真正为上下文设计的意外选择。不同设计之间不应重复。可在 light/dark themes、不同字体和不同美学之间变化。不要在多次生成中收敛到常见选择（例如 Space Grotesk）。

IMPORTANT：让实现复杂度匹配审美愿景。Maximalist designs 需要更丰富的动画和效果代码。Minimalist 或 refined designs 则需要克制、精确，以及对 spacing、typography 和微妙细节的细致把控。优雅来自把愿景执行到位。

记住：Claude 能做出非常有创造力的作品。不要保守，展示当你跳出框架并完全投入一个独特愿景时真正能创造出的东西。

交付检查

界面在 desktop 和 mobile 的关键断点都可用，没有遮挡、溢出或不可触达控件
交互状态完整，包括 loading、empty、error、success、disabled 和 hover/focus states
可访问性不被视觉效果牺牲：语义结构、键盘导航、焦点态、对比度和 alt text 必须成立
视觉方向清晰一致，typography、spacing、motion、background 和组件细节服务同一概念
动画和装饰不阻塞核心任务，也不造成明显性能退化

このリポジトリの他の Skills

同じリポジトリ

architecture-map

Tx1207/hello-scholar

Use when the user asks to generate or refresh an architecture map, structure diagram, core call flow, local viewer assets, or runs ~map. Produces hello-scholar native architecture-map.json plus compact Markdown and Mermaid companion artifacts.

2026-05-296

architecture-view

Tx1207/hello-scholar

Use when the user asks to open the architecture viewer, view diagrams, inspect node evidence, export the local architecture map, or troubleshoot hello-scholar map view/export behavior.

2026-05-296

analyze

Tx1207/hello-scholar

实验分析命令，基于 experiment package、runs、metrics 和 evidence 形成结果解释与下一轮实验计划。

2026-05-296

build

Tx1207/hello-scholar

实现命令，把 plan package、change record 或 experiment package 落成代码、配置、文档或实验变更。

2026-05-296

map

Tx1207/hello-scholar

Use only when the user explicitly types ~map. Generates or refreshes the hello-scholar native architecture map by invoking the architecture-map workflow, then validates and points to the local viewer.

用于涉及编写或修改源码的日常编码任务。

name	frontend-design
description	创建具有辨识度、production-grade 且高设计质量的前端界面。当用户要求构建 web components、pages、artifacts、posters 或 applications 时使用该 skill，例如 websites、landing pages、dashboards、React components、HTML/CSS layouts，或需要 styling / beautifying 任意 web UI 时。生成有创意、精致且避免通用 AI 审美的代码和 UI 设计。
license	Complete terms in LICENSE.txt
version	0.1.0

该 skill 指导创建具有辨识度、production-grade 的前端界面，避免通用 “AI slop” 审美。实现真实可运行代码，并对美学细节和创意选择保持极高关注。

用户会提供前端需求：要构建的 component、page、application 或 interface。用户也可能提供用途、受众或技术约束。

设计思考

编码前，先理解上下文并选择一个 bold 的美学方向：

Purpose：这个界面解决什么问题？谁使用它？
Tone：选择一种明确极端风格：brutally minimal、maximalist chaos、retro-futuristic、organic/natural、luxury/refined、playful/toy-like、editorial/magazine、brutalist/raw、art deco/geometric、soft/pastel、industrial/utilitarian 等。它们只是灵感，最终设计要忠于你选择的美学方向。
Constraints：技术要求（framework、performance、accessibility）。
Differentiation：是什么让它令人难忘？用户会记住哪一个点？

CRITICAL：选择清晰的概念方向并精确执行。大胆的 maximalism 和克制的 refined minimalism 都可以成立，关键是 intentionality，而不是 intensity。

然后实现工作代码（HTML/CSS/JS、React、Vue 等），要求：

Production-grade 且功能可用
视觉上有冲击力且令人记住
有清晰审美立场并保持整体一致
每个细节都经过精修

前端美学指南

重点关注：

Typography：选择美观、独特、有趣的字体。避免 Arial、Inter 等通用字体；优先选择能提升前端美学的、有性格的字体。用 distinctive display font 搭配精致正文字体。
Color & Theme：坚持统一审美。使用 CSS variables 保持一致性。强主色 + 锐利点缀通常比平均分布的胆怯配色更好。
Motion：用 animations 表达效果与 micro-interactions。HTML 优先使用 CSS-only 方案。React 中如可用则使用 Motion library。聚焦高影响力时刻：一次经过编排的 page load 和 staggered reveals（animation-delay）比零散微交互更有惊喜。使用出人意料的 scroll-triggering 和 hover states。
Spatial Composition：使用非预期布局、不对称、重叠、斜向流动、打破网格的元素。可以选择大面积留白，也可以选择受控密度。
Backgrounds & Visual Details：营造氛围和深度，不要默认纯色背景。添加与整体审美匹配的上下文效果和纹理。可使用 gradient meshes、noise textures、geometric patterns、layered transparencies、dramatic shadows、decorative borders、custom cursors 和 grain overlays 等创意形式。

记住：Claude 能做出非常有创造力的作品。不要保守，展示当你跳出框架并完全投入一个独特愿景时真正能创造出的东西。

交付检查

界面在 desktop 和 mobile 的关键断点都可用，没有遮挡、溢出或不可触达控件
交互状态完整，包括 loading、empty、error、success、disabled 和 hover/focus states
可访问性不被视觉效果牺牲：语义结构、键盘导航、焦点态、对比度和 alt text 必须成立
视觉方向清晰一致，typography、spacing、motion、background 和组件细节服务同一概念
动画和装饰不阻塞核心任务，也不造成明显性能退化