Проектирование выразительных фронтенд-интерфейсов
Типовой UI-вывод создает ощущение незавершенности продукта и снижает доверие к нему. Этот навык направляет Claude, Codex и Claude Code к созданию более проработанного фронтенда с более сильной визуальной концепцией.
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/7spade-frontend-design.md and its manifest at https://skillstore.io/api/skills/7spade-frontend-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Использование «frontend-design». Панель аналитики SaaS должна ощущаться премиальной и полезной для ежедневного мониторинга.
Ожидаемый результат:
Концепция адаптивной панели управления с сфокусированной навигацией, компактными панелями данных, выразительной типографикой, сдержанными цветовыми акцентами и практичными состояниями наведения.
Использование «frontend-design». Лендинг для творческого инструмента выглядит слишком шаблонно.
Ожидаемый результат:
Обновленное направление страницы с более сильной визуальной темой, смелой композицией, характерной типографикой, анимационными подсказками и более ясными конверсионными секциями.
Использование «frontend-design». React component нуждается в лучшей стилизации и микро-взаимодействиях.
Ожидаемый результат:
Визуальная проработка компонента с уточненными отступами, продуманными состояниями, доступными целевыми значениями контраста и вариантами анимации, которые поддерживают взаимодействие.
All three static findings are false positives caused by design-focused wording in SKILL.md. I found no prompt injection, exfiltration intent, external command use, network behavior, or unsafe filesystem behavior in the reviewed skill files.
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
https://skillstore.io/skills/7spade-frontend-design/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/7spade-frontend-design?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/7spade-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/7spade-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/7spade-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>7Spade. (2026). frontend-design security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/7spade-frontend-design/audits/6@techreport{7spade-7spade-frontend-design-2026,
author = {7Spade},
title = {frontend-design security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/7spade-frontend-design/audits/6},
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 6)"
version: "unspecified"
type: report
authors:
- name: "7Spade"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/7spade-frontend-design/audits/6"
identifiers:
- type: other
value: "skillstore:7spade-frontend-design:audit:6"
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
Преобразовать черновые требования к панели управления в проработанный интерфейс с более сильной иерархией, компоновкой и деталями взаимодействия.
Доработать маркетинговую страницу так, чтобы макет, типографика, анимация и визуальный тон ощущались более осознанными.
Применить выразительное визуальное направление к компонентам, сохранив практичность реализации для фронтенд-разработки.
Use the frontend-design skill to create a polished web page for [product or topic]. Include responsive HTML and CSS with a clear visual direction.
Use the frontend-design skill to improve this interface: [paste description]. Keep the workflow intact, but upgrade layout, typography, color, and details.
Use the frontend-design skill to design a dashboard for [users]. Include key states, responsive layout, hierarchy, and interaction details for repeated use.
Use the frontend-design skill to define and implement a distinctive frontend direction for [product]. Provide components, layout rules, motion guidance, and styling rationale.
Автор
7SpadeЛицензия
Complete terms in LICENSE.txt
Ревизия Skillstore
r1
Примечание о версии
Автор не указал версию.
Ссылка
c1fdca50ff516318f65fed0d7f9e82797c5171dc
Актуальность поддержки
18.07.2026
Использование
38 загрузок · 233 просмотров
Структура файлов
📄 SKILL.md
Создавайте надежные AI Skills
Командам, работающим с ИИ, часто нужны повторно используемые рабочие процессы, но им не хватает четкой структуры навыков. Этот навык помогает Claude, Codex и Claude Code планировать, создавать, проверять и упаковывать навыки.
Выбор ролей Azure с минимальными привилегиями
Решения о ролях Azure могут предоставлять слишком широкий доступ, когда требования неясны. Этот навык сопоставляет нужные разрешения с минимальными ролями и рекомендациями по назначению.
Тестирование веб-приложений с Playwright
Изменения во фронтенде требуют проверки в реальном браузере, а не только статических проверок. Этот навык помогает Claude, Codex и Claude Code выполнять тестирование на основе Playwright, отладку, создание скриншотов и проверку консоли.
Создание утилит Angular с @delon/util
Команды Angular часто повторно реализуют логику форматирования данных, клонирования, группировки и браузерных хелперов. Этот навык показывает, как использовать хелперы @delon/util в компонентах ng-alain и рабочих процессов задач.
Подготовка документации, проверенной читателями
Важные документы часто оказываются неэффективными, потому что ключевой контекст остается в голове автора. Этот навык проводит Claude, Codex или Claude Code через сбор контекста, структурированную подготовку черновика, итеративное уточнение и тестирование на читателях.
Создавайте дашборды с диаграммами @delon
Командам Angular нужны согласованные диаграммы, соответствующие шаблонам дашбордов ng-alain. Этот skill предоставляет примеры @delon/chart и рекомендации для распространенных корпоративных визуализаций.
Проектируйте выразительные UI-прототипы
от tencentcloudbase
Типовым AI-интерфейсам часто не хватает визуального направления и деталей с учетом платформы. Этот навык помогает Claude, Codex и Claude Code определить дизайн-замысел перед созданием прототипов.
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 до разработки
от pbakaus
Команды часто создают интерфейсы до того, как уточнят цели пользователей, состояния и ограничения. Этот навык помогает провести исследование и подготовить дизайн-бриф для реализации.
Check designs with deterministic CSS rules
от cubha
Design reviews can vary between reviewers and slow down delivery. This skill applies repeatable checks to HTML and CSS so teams can catch token, layout, and accessibility issues before release.
Применение стилистики бренда Anthropic
от ZhanlinCui
Командам часто нужны единообразные визуальные материалы в стиле Anthropic для документов и презентаций. Этот навык предоставляет практические рекомендации по цветам, типографике и акцентам для создания отполированных брендированных артефактов.
Проектируйте доступные интерфейсы продуктов
от sickn33
Командам часто сложно преобразовать потребности пользователей в согласованные и доступные интерфейсы. Этот навык помогает с исследованиями, сценариями, дизайн-системами, токенами и передачей в разработку.