{"id":710,"date":"2026-05-09T20:07:54","date_gmt":"2026-05-09T12:07:54","guid":{"rendered":"http:\/\/127.0.0.1:13305\/hub\/lobehub-skill-frontend-ui-ux\/"},"modified":"2026-05-13T00:08:38","modified_gmt":"2026-05-12T16:08:38","slug":"code-yeongyu-oh-my-opencode-frontend-ui-ux","status":"publish","type":"post","link":"https:\/\/ai.wuaishare.cn\/hub\/710","title":{"rendered":"frontend-ui-ux"},"content":{"rendered":"\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"630\" src=\"https:\/\/ai.wuaishare.cn\/hub\/wp-content\/uploads\/sites\/2\/2026\/05\/frontend-ui-ux.png\" alt=\"frontend-ui-ux\" class=\"wp-image-1025\" srcset=\"https:\/\/ai.wuaishare.cn\/hub\/wp-content\/uploads\/sites\/2\/2026\/05\/frontend-ui-ux.png 1200w, https:\/\/ai.wuaishare.cn\/hub\/wp-content\/uploads\/sites\/2\/2026\/05\/frontend-ui-ux-300x158.png 300w, https:\/\/ai.wuaishare.cn\/hub\/wp-content\/uploads\/sites\/2\/2026\/05\/frontend-ui-ux-1024x538.png 1024w, https:\/\/ai.wuaishare.cn\/hub\/wp-content\/uploads\/sites\/2\/2026\/05\/frontend-ui-ux-768x403.png 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n<p class=\"wp-block-paragraph\">\u4e00\u79cd\u7531\u8bbe\u8ba1\u5e08\u8f6c\u53d8\u4e3a\u5f00\u53d1\u4eba\u5458\u7684\u6280\u80fd\uff0c\u5c06\u89c6\u89c9\u5de5\u827a\u4e0e\u751f\u4ea7\u7ea7\u524d\u7aef\u5de5\u7a0b\u76f8\u7ed3\u5408\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It creates pixel-perfect layouts, refined spacing, color harmony, and memorable micro-interactions using HTML\/CSS\/JS and modern frameworks (React, Vue, Angular). Key features include rapid aesthetic direction (purpose, tone, constraints, differentiation), implementation of accessible, performant components and animations, creation or refinement of design systems and tokens, and seamless integration with existing code patterns. Use cases: building new UIs from concept, converting design-less specs into cohesive interfaces, elevating component libraries, fixing visual regressions, and performing design-aware code reviews. Core advantages are fast, high-fidelity UI delivery, maintainable code that matches team conventions, improved UX cohesion, and clear, transparent documentation and verification throughout the development process.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4e00\u79cd\u7531\u8bbe\u8ba1\u5e08\u8f6c\u53d8\u4e3a\u5f00\u53d1\u4eba\u5458\u7684\u6280\u80fd\uff0c\u5c06\u89c6\u89c9\u5de5\u827a\u4e0e\u751f\u4ea7\u7ea7\u524d\u7aef\u5de5\u7a0b\u76f8\u7ed3\u5408\u3002<\/p>\n","protected":false},"author":0,"featured_media":1025,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ai_share_source_url":"https:\/\/lobehub.com\/skills\/code-yeongyu-oh-my-opencode-frontend-ui-ux","ai_share_source_title":"frontend-ui-ux | Skills Marketplace \u00b7 LobeHub","ai_share_status":"\u5df2\u53d1\u5e03","ai_share_author_label":"code-yeongyu","ai_share_primary_category":"\u5de5\u4f5c\u6d41\u81ea\u52a8\u5316","ai_share_tool_type":"workflow_skill_pack","ai_share_resource_type":"workflow_skill_pack","ai_share_platform_support":"Claude \/ Codex \/ ChatGPT Skills","ai_share_collection":"LobeHub Skills","ai_share_last_verified_at":"2026-05-12","ai_share_provider_observed_at":"2026-09-21T04:53:04+00:00","ai_share_language_support":"en","ai_share_target_user":"\u524d\u7aef\u5de5\u7a0b\u5e08,\u4ea7\u54c1\u8bbe\u8ba1\u5e08,\u72ec\u7acb\u5f00\u53d1\u8005","ai_share_pricing_model":"free","ai_share_deployment_mode":"local","ai_share_delivery_mode":"skill","ai_share_region_availability":"global","ai_share_source_platform":"LobeHub Skills","ai_share_download_url":"https:\/\/lobehub.com\/skills\/code-yeongyu-oh-my-opencode-frontend-ui-ux\/skill.md","ai_share_view_count":10,"ai_share_bookmark_count":0,"ai_share_download_count":0,"ai_share_first_party_view_count":18,"ai_share_feature_count":4,"ai_share_resource_count":0,"ai_share_capability_count":4,"ai_share_version_history_count":0,"ai_share_api_available":false,"ai_share_open_source":true,"ai_share_repo_url":"https:\/\/github.com\/code-yeongyu\/oh-my-opencode","ai_share_documentation_url":"https:\/\/lobehub.com\/skills\/code-yeongyu-oh-my-opencode-frontend-ui-ux\/skill.md","creator_id":"lobehub-skills-author-code-yeongyu","creator_slug":"code-yeongyu","creator_name":"code-yeongyu","creator_type":"unknown","creator_status":"external","creator_website_url":"https:\/\/github.com\/code-yeongyu","creator_github_url":"https:\/\/github.com\/code-yeongyu","creator_avatar_url":"https:\/\/github.com\/code-yeongyu.png"},"categories":[2460],"tags":[300,301,160,899,898],"ai_series":[],"ai_topic":[110],"ai_creator":[897],"ai_collection":[884],"ai_resource_type":[105],"ai_tool_tag":[306,307,165,901,900],"class_list":["post-710","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-workflow_skill_pack","tag-lobehub","tag-skill","tag-ui","tag-ux","tag-898","ai_topic-workflow-automation","ai_creator-code-yeongyu","ai_collection-lobehub-skills","ai_resource_type-workflow_skill_pack","ai_tool_tag-lobehub","ai_tool_tag-skill","ai_tool_tag-ui","ai_tool_tag-ux","ai_tool_tag-900"],"source_url":"","preserve_modified":false,"lang":"zh-cn","translations":{"zh-cn":710},"pll_sync_post":{},"_links":{"self":[{"href":"https:\/\/ai.wuaishare.cn\/hub\/wp-json\/wp\/v2\/posts\/710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ai.wuaishare.cn\/hub\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.wuaishare.cn\/hub\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.wuaishare.cn\/hub\/wp-json\/wp\/v2\/comments?post=710"}],"version-history":[{"count":1,"href":"https:\/\/ai.wuaishare.cn\/hub\/wp-json\/wp\/v2\/posts\/710\/revisions"}],"predecessor-version":[{"id":1026,"href":"https:\/\/ai.wuaishare.cn\/hub\/wp-json\/wp\/v2\/posts\/710\/revisions\/1026"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ai.wuaishare.cn\/hub\/wp-json\/wp\/v2\/media\/1025"}],"wp:attachment":[{"href":"https:\/\/ai.wuaishare.cn\/hub\/wp-json\/wp\/v2\/media?parent=710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.wuaishare.cn\/hub\/wp-json\/wp\/v2\/categories?post=710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.wuaishare.cn\/hub\/wp-json\/wp\/v2\/tags?post=710"},{"taxonomy":"ai_series","embeddable":true,"href":"https:\/\/ai.wuaishare.cn\/hub\/wp-json\/wp\/v2\/ai_series?post=710"},{"taxonomy":"ai_topic","embeddable":true,"href":"https:\/\/ai.wuaishare.cn\/hub\/wp-json\/wp\/v2\/ai_topic?post=710"},{"taxonomy":"ai_creator","embeddable":true,"href":"https:\/\/ai.wuaishare.cn\/hub\/wp-json\/wp\/v2\/ai_creator?post=710"},{"taxonomy":"ai_collection","embeddable":true,"href":"https:\/\/ai.wuaishare.cn\/hub\/wp-json\/wp\/v2\/ai_collection?post=710"},{"taxonomy":"ai_resource_type","embeddable":true,"href":"https:\/\/ai.wuaishare.cn\/hub\/wp-json\/wp\/v2\/ai_resource_type?post=710"},{"taxonomy":"ai_tool_tag","embeddable":true,"href":"https:\/\/ai.wuaishare.cn\/hub\/wp-json\/wp\/v2\/ai_tool_tag?post=710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}