원클릭으로 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.