跳到正文
cccskills
免费在 GitHub 公开

frontend-design

Design distinctive web interfaces when no existing brand guidelines apply. The skill helps define a visual direction and carry it through typography, color, layout, backgrounds, and animation in HTML, with implementation detail matched to the chosen style.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

Aesthetic direction for designs outside an existing brand system

查看安装方法

适用场景

  • Designing a web page without existing brand guidelines
  • Coordinating typography, color, and spacing
  • Creating distinctive layouts and page animations

包含的文件(1)

  • SKILL.md2.4 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Frontend design

Use this guidance when designing frontend/UI work that is NOT governed by an existing brand or design system. Create distinctive HTML with exceptional attention to aesthetic details and creative choices.

Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

  • Purpose: What problem does this interface solve? Who uses it?
  • Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. Use these for inspiration but design one that is true to the aesthetic direction.
  • Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.

Aesthetics Guidelines

  • Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt for distinctive, characterful choices. Pair a distinctive display font with a refined body font.
  • Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
  • Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
  • Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
  • Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, grain overlays.

Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on the same choices across generations.

Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate animations and effects. Minimalist designs need restraint, precision, and careful attention to spacing and subtle details.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

3d-object

免费

Create a 3D object with three.js, inspect it from every angle in an interactive viewer, and download it as OBJ + MTL or GLB for use in other 3D applications.

中文简介正在准备中。当前显示英语简介。

  • Create a 3D object and inspect it from every angle
  • Export a model for further editing in Blender
  • Review an object's silhouette and materials
asgeirtj/system_prompts_leaks7万2026年10月20日 更新

Maintain a private task list with deadlines, next steps, waiting parties, and blockers. Update progress and dependencies, merge duplicate items, and archive closed tasks so ongoing commitments stay clear and easy to follow.

中文简介正在准备中。当前显示英语简介。

  • Record tasks and commitments with deadlines
  • Track pending replies and reasons work cannot proceed
  • Update task dependencies when prerequisites are completed
asgeirtj/system_prompts_leaks7万2026年10月20日 更新

agents

免费

Coordinate a task from a verifiable goal through completion. Handle work directly or split independent tasks across separate agent sessions, track progress, verify results, and arrange pull request merging when included in the goal.

中文简介正在准备中。当前显示英语简介。

  • Split independent tasks across agents
  • Check progress across ongoing tasks
  • Resume a previously started project
asgeirtj/system_prompts_leaks7万2026年10月20日 更新

Create animated HTML pages with smooth scene transitions and playback controls. An editable timeline lets users adjust scene lengths and speeds, with fixed landscape or portrait layouts prepared for video export.

中文简介正在准备中。当前显示英语简介。

  • Create an animated product walkthrough
  • Explain a message through moving text and graphics
  • Build a portrait animation for video export
asgeirtj/system_prompts_leaks7万2026年10月20日 更新

Review synced Apple Health records, including steps, heart rate, sleep, and workouts. Retrieve daily summaries or detailed samples for a chosen period, and check sync status and missing data before interpreting the results.

中文简介正在准备中。当前显示英语简介。

  • Review daily steps and heart rate over time
  • Check sleep stages, duration, and awakenings
  • Review workout duration, distance, and calories
asgeirtj/system_prompts_leaks7万2026年10月20日 更新

Create and edit Word documents and templates, reorganize text, replace images, and work with tracked changes or comments. Apply proper headings and lists, then render every page to check its appearance before delivery.

中文简介正在准备中。当前显示英语简介。

  • Create a structured Word document
  • Reorganize content in an existing document
  • Replace images or text in a document
asgeirtj/system_prompts_leaks7万2026年10月20日 更新

查看 asgeirtj 的全部技能

报告此技能的问题