Создавайте выразительные фронтенд-интерфейсы
Типовые интерфейсы, сгенерированные ИИ, делают продукты взаимозаменяемыми на вид. Этот навык помогает Claude, Codex и Claude Code двигаться к продуманному UI-направлению, дизайн-системам и рабочему фронтенд-коду.
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/sickn33-frontend-design.md and its manifest at https://skillstore.io/api/skills/sickn33-frontend-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Использование «frontend-design». Создай dashboard для операционной команды, который должен ощущаться точным, быстрым и серьезным.
Ожидаемый результат:
Ответ определит индустриально-утилитарное направление, задаст правила типографики и макета, а затем предоставит рабочую реализацию dashboard.
Использование «frontend-design». Переделай типовую домашнюю страницу SaaS так, чтобы она ощущалась запоминающейся и премиальной.
Ожидаемый результат:
Ответ заменит стандартные паттерны сфокусированной визуальной идеей, выверенным выбором шрифтов, сдержанным цветом и осмысленной анимацией.
Использование «frontend-design». Выбери визуальный стиль для игровой образовательной программы по финансам.
Ожидаемый результат:
Ответ сравнит несколько направлений, оценит их с помощью DFII и порекомендует наиболее подходящий дизайн до реализации.
All seven static findings are false positives. Lines 63 and 65 are Markdown fences around an arithmetic formula, while the remaining matches are ordinary design guidance. No prompt injection, command execution, reconnaissance, or malicious intent was found.
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
https://skillstore.io/skills/sickn33-frontend-design/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/sickn33-frontend-design?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/sickn33-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/sickn33-frontend-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>sickn33. (2026). frontend-design security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-frontend-design/audits/5@techreport{sickn33-sickn33-frontend-design-2026,
author = {sickn33},
title = {frontend-design security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/sickn33-frontend-design/audits/5},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-design security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "sickn33"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/sickn33-frontend-design/audits/5"
identifiers:
- type: other
value: "skillstore:sickn33-frontend-design:audit:5"
description: "Skillstore immutable audit report identifier"
Навык каждого автора остаётся отдельным устанавливаемым вариантом. Рекомендуемый вариант ранжируется по данным Skillstore.
Почему этот вариант первый
atman36-frontend-design
2026-09-09
frontend-design
2026-09-09
zhanlincui-frontend-design
2026-09-09
yyh211-frontend-design
2026-09-09
1bertogit-frontend-design
2026-09-09
92bilal26-frontend-design
2026-09-09
adamaugustinsky-frontend-design
2026-09-09
am-will-frontend-design
2026-09-09
azeem-2-frontend-design
2026-09-09
cesaraugustusgrob-frontend-design
2026-09-09
davila7-frontend-design
2026-09-09
anthropics-frontend-design
2026-09-09
pbakaus-frontend-design
2026-09-09
7spade-frontend-design
2026-09-09
sickn33-frontend-design
2026-09-09
agentworkforce-frontend-design
2026-09-09
ajv009-frontend-design
2026-09-09
dennisliuck-frontend-design
2026-09-09
Превратите черновую идею веб-приложения в выразительный первый экран с четким визуальным направлением и рабочей фронтенд-структурой.
Замените стандартные макеты, шрифты и цвета целостной дизайн-системой, которая соответствует аудитории продукта.
Сравните эстетические направления, оцените реализуемость и определите правила реализации до создания компонентов.
Создай готовую к продакшену лендинг-страницу для [product]. Выбери одно четкое эстетическое направление, определи дизайн-систему и реализуй первый экран.
Переделай этот интерфейс так, чтобы избежать типовых паттернов AI UI. Сохрани основной workflow, но улучши типографику, цвет, макет и анимацию.
Создай фронтенд-дизайн-систему для [application type]. Включи эстетическое направление, правила для переиспользуемых компонентов, ожидания по доступности и рекомендации по реализации.
Сравни три визуальных направления для [product], оцени каждое с помощью DFII, выбери самый сильный вариант, затем создай интерфейс с использованием этого направления.
Автор
sickn33Лицензия
MIT
Ревизия Skillstore
r2
Примечание о версии
Автор не указал версию.
Ссылка
88a8e9a07f4c54ab105c1c41b6267c287146b07b
Актуальность поддержки
26.07.2026
Использование
23 загрузок · 114 просмотров
Структура файлов
📄 SKILL.md
Создание маркетингового контента в едином стиле бренда
Маркетинговым командам нужен контент, который остается согласованным во всех каналах. Этот навык помогает планировать, писать, анализировать и оптимизировать контент с учетом голоса бренда и SEO.
Улучшайте LLM-промпты с помощью проверенных паттернов
Непоследовательные промпты тратят время и снижают доверие к результатам AI. Этот навык помогает проектировать промпты с использованием переиспользуемых паттернов, примеров, этапов оценки и рабочих процессов оптимизации.
Проектируйте масштабируемые архитектуры ПО
Архитектурные решения сложно сравнивать для веб-, мобильных, backend- и облачных систем. Этот навык предоставляет структурированные руководства и локальные скрипты-заготовки для отчетов, анализа зависимостей и документирования компромиссов.
Создавайте fullstack-приложения с senior-паттернами
Командам нужны единые рекомендации по настройке, архитектуре и ревью для современных веб-приложений. Этот skill предоставляет scaffolders, справочные материалы по рабочим процессам и quality prompts для проектов на React, Next.js, Node.js, GraphQL и PostgreSQL.
Оптимизируйте AI-промпты с Prompt Engineer
Писать понятные промпты сложно, когда цели расплывчаты или комплексны. Этот навык превращает черновые запросы в структурированные промпты с использованием проверенных фреймворков для промптинга.
Приоритизируйте продуктовую работу с помощью исследовательских инсайтов
Продуктовым командам нужны более быстрые способы ранжировать функции, обобщать интервью и документировать решения. Этот навык предоставляет RICE-оценку, анализ интервью и шаблоны PRD для структурированного планирования.
Build Accessible Tailwind Interfaces
от nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
Улучшайте UX с помощью дизайн-рекомендаций на основе исследований
от shubhamsaboo
Команды часто проектируют сценарии на основе предположений и упускают проблемы доступности. Этот навык помогает с исследованиями, структурой, дизайном взаимодействия и ревью, используя лучшие практики UX.
Аудит веб-доступности на соответствие WCAG
от 89jobrien
Пробелы в доступности могут блокировать пользователей и создавать риски несоответствия требованиям. Этот навык помогает проводить аудиты WCAG, проверки со скринридерами, тестирование с клавиатуры и планирование исправлений.
Build Consistent Design Systems and Slides
от nextlevelbuilder
Inconsistent tokens and components make design handoffs difficult. This skill structures tokens, validates usage, and generates brand-aligned presentation assets.
Планируйте UX до разработки
от pbakaus
Команды часто создают интерфейсы до того, как уточнят цели пользователей, состояния и ограничения. Этот навык помогает провести исследование и подготовить дизайн-бриф для реализации.
Проектируйте выразительные UI-прототипы
от tencentcloudbase
Типовым AI-интерфейсам часто не хватает визуального направления и деталей с учетом платформы. Этот навык помогает Claude, Codex и Claude Code определить дизайн-замысел перед созданием прототипов.