メニュー
Web and App implementation guide for AI Native UI. Trigger when user wants conversational interfaces, adaptive layouts, and generative AI aesthetics.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/ranbot-ai/awesome-skills --skill ai-native-uiコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | ai-native-ui |
| description | Web and App implementation guide for AI Native UI. Trigger when user wants conversational interfaces, adaptive layouts, and generative AI aesthetics. |
| category | Creative & Media |
| source | antigravity |
| tags | ["react","ai","agent","design","image"] |
| url | https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/design-it/ai-native-ui |
"Fluid, adaptive, and conversational. The interface morphs to serve the content."
Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.
Inter, SF Pro).body {
background-color: #FAFAFA;
color: #1A1A1A;
font-family: 'Inter', sans-serif;
}
/* The AI Chat Input */
.ai-prompt-box {
background: #ffffff;
border-radius: 24px;
padding: 16px 24px;
box-shadow: 0 8px 30px rgba(0,0,0,0.05);
border: 1px solid transparent;
/* AI Glow Border */
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image:
linear-gradient(#ffffff, #ffffff),
linear-gradient(90deg, #8A2387, #E94057, #F27121);
transition: all 0.3s ease;
}
.ai-prompt-box:focus-within {
box-shadow: 0 12px 40px rgba(233, 64, 87, 0.15);
}
/* Generative Shimmer Text */
.ai-generating-text {
background: linear-gradient(90deg, #aaa 0%, #333 50%, #aaa 100%);
background-size: 200% auto;
color: transparent;
-webkit-background-clip: text;
animation: shine 1.5s linear infinite;
}
@keyframes shine {
to { background-position: 200% center; }
}
struct AINativeInput: View {
@State private var isGenerating = true
@State private var gradientOffset = 0.0
var body: some View {
VStack {
// Generative Text Shimmer
if isGenerating {
Text("Synthesizing response...")
.font(.headline)
.foregroundStyle(
LinearGradient(
colors: [.gray.opacity(0.3), .gray, .gray.opacity(0.3)],
startPoint: UnitPoint(x: gradientOffset - 1, y: 0),
endPoint: UnitPoint(x: gradientOffset + 1, y: 0)
)
)
.onAppear {
withAnimation(.linear(duration: 1.5).repeatForever(autoreverses: false)) {
gradientOffset = 1.0
}
}
}
// AI Input Box
HStack {
TextField("Ask anything...", text: .constant(""))
Image(systemName: "sparkles")
.foregroundColor(.purple)
}
.padding()
.background(Color.white)
.cornerRadius(24)
.overlay(
RoundedRectangle(cornerRadius: 24)
.stroke(
LinearGradient(colors: [.purple, .pink, .orange], startPoint: .topLeading, endPoint: .bottomTrailing),
lineWidth: 2
)
)
.shadow(color: .pink.opacity(0.15), radius: 20)
}
.padding()
}
}
LinearGradient mask over text creates a beautiful "thinking" state..stroke on a RoundedRectangle overlay to create the signature AI glowing border around input fields.import 'package:shimmer/shimmer.dart';
class AINativeInput extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Generative Shimmer
Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[600]!,
child: const Text('Synthesizing response...',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
),
const SizedBox(height: 16),
// AI Input Box
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(color: Colors.pink.withOpacity(0.15), blurRadius: 20),
],
),
child: Container(