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

front-end-design

スター5

フォーク4

更新日2026年4月9日 07:09

Design and implement distinctive, production-ready front-end UI. Use when users ask for UI design, landing pages, components, styling, responsive layouts, accessibility, or visual polish.

インストール

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

Manusで実行

ソース

Scottish-Hill-Runners

Scottish-Hill-Runners/site-builder

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

ダウンロード

Manusで実行

Front-End Design

Goal

Produce intentional, distinctive, and accessible interfaces that work well on mobile and desktop.

Workflow

Clarify target users, key user journeys, and visual tone.
Define a style direction first: typography, color system, spacing rhythm, and motion rules.
Implement semantic HTML and a scalable CSS structure before adding visual effects.
Ensure responsive behavior at common breakpoints and for narrow mobile screens.
Add accessibility checks: keyboard use, focus visibility, color contrast, and alt text.
Keep performance reasonable by minimizing layout shifts and oversized assets.

Design Rules

Avoid generic, boilerplate layouts.
Pick purposeful typography and a coherent visual hierarchy.
Use CSS variables for theme tokens.
Use animation sparingly and only to support comprehension.
Preserve existing design systems when working in an established codebase.

Done Criteria

UI is functional, responsive, and readable on desktop and mobile.
Styling is consistent and not dependent on ad-hoc inline overrides.
Core interactions are keyboard accessible.

このリポジトリの他の Skills

同じリポジトリ

mcp-builder

Scottish-Hill-Runners/site-builder

Design and scaffold Model Context Protocol (MCP) servers and integrations. Use when users ask to create an MCP server, add MCP tools/resources/prompts, define schemas, or connect external systems through MCP.

2026-04-095

simplify

Scottish-Hill-Runners/site-builder

Refactor code, docs, or workflows to be simpler without changing behavior. Use when users ask to simplify, clean up, reduce complexity, remove duplication, or improve readability.

2026-04-095

skill-creator

Scottish-Hill-Runners/site-builder

Create or improve Copilot Skill definitions. Use when users ask to build a new SKILL.md, refine skill descriptions, improve skill discoverability, or package reusable workflows.

2026-04-095

web-app-testing

Scottish-Hill-Runners/site-builder

Plan and implement practical testing for web apps. Use when users ask for unit tests, integration tests, end-to-end tests, test plans, flaky test fixes, or CI test coverage for front-end/back-end web projects.

2026-04-095

name	front-end-design
description	Design and implement distinctive, production-ready front-end UI. Use when users ask for UI design, landing pages, components, styling, responsive layouts, accessibility, or visual polish.

Front-End Design

Goal

Produce intentional, distinctive, and accessible interfaces that work well on mobile and desktop.

Workflow

Clarify target users, key user journeys, and visual tone.
Define a style direction first: typography, color system, spacing rhythm, and motion rules.
Implement semantic HTML and a scalable CSS structure before adding visual effects.
Ensure responsive behavior at common breakpoints and for narrow mobile screens.
Add accessibility checks: keyboard use, focus visibility, color contrast, and alt text.
Keep performance reasonable by minimizing layout shifts and oversized assets.

Design Rules

Avoid generic, boilerplate layouts.
Pick purposeful typography and a coherent visual hierarchy.
Use CSS variables for theme tokens.
Use animation sparingly and only to support comprehension.
Preserve existing design systems when working in an established codebase.

Done Criteria

UI is functional, responsive, and readable on desktop and mobile.
Styling is consistent and not dependent on ad-hoc inline overrides.
Core interactions are keyboard accessible.