开源 Skill

Frontend Design

在编写前端代码前先确定设计方向、视觉层级和标志性表达，再实现生产级界面。

分类: 前端设计
维护者: OpenAI
来源: 原始仓库 ↗
许可证: Apache-2.0
固定版本: a43860438cd5
最近检查: 2026-07-28

适用场景

网站和 Landing Page
React 页面
UI 重设计

设计先行视觉层级生产级界面

安装

把它带到你的 Codex。

第三方内容，请安装前检查。安装将固定到页面标记的版本。

查看原始仓库 ↗

显示安装命令

set -euo pipefail
skill_name='Frontend Design'
source_url='https://github.com/openai/skills'
source_ref='a43860438cd50ec3611c6c630a37563943444e23'
source_subdirectory='skills/.experimental/frontend-design'
temp_root=$(mktemp -d)
backup_root="${CODEX_HOME:-$HOME/.codex}/skills-backups"
target_root="${CODEX_HOME:-$HOME/.codex}/skills"
backup_path=""
install_complete="0"
restore_previous() {
  if [ "$install_complete" != "1" ]; then
    rm -rf "$target_root/$skill_name"
    if [ -n "$backup_path" ] && [ -d "$backup_path" ]; then
      mv "$backup_path" "$target_root/$skill_name"
    fi
  fi
}
cleanup() { rm -rf "$temp_root"; }
trap 'restore_previous; cleanup' EXIT
git clone --filter=blob:none --no-checkout "$source_url" "$temp_root/repo"
git -C "$temp_root/repo" checkout "$source_ref" -- "$source_subdirectory"
test -f "$temp_root/repo/$source_subdirectory/SKILL.md"
mkdir -p "$target_root" "$backup_root"
if [ -e "$target_root/$skill_name" ]; then
  backup_path="$backup_root/$skill_name-$(date +%Y%m%d-%H%M%S)"
  mv "$target_root/$skill_name" "$backup_path"
fi
cp -R "$temp_root/repo/$source_subdirectory" "$target_root/$skill_name"
test -f "$target_root/$skill_name/SKILL.md"
install_complete="1"
printf 'Installed %s\n' "$target_root/$skill_name"
if [ -n "$backup_path" ]; then printf 'Backup %s\n' "$backup_path"; fi