generated from Paul.Kim/tpl-superclaude
refactor(framework): Replace SuperClaude with Claude Flow & SPARC
This commit marks a significant architectural overhaul, replacing the legacy SuperClaude and Taskmaster AI frameworks with the new Claude Flow orchestration system and the SPARC/Roo methodology.
The new framework emphasizes parallel, swarm-based execution and mandatory batch operations for improved efficiency and coordination.
Key Changes:
- **Framework Migration:** The entire `.claude` and `.cursor` directories, containing the old command, persona, and rule systems, have been removed. They are replaced by the new `.roomodes` configuration and a comprehensive `CLAUDE.md` guide for Claude Flow.
- **New Orchestration Engine:** Introduced Claude Flow as the primary MCP server. The updated `CLAUDE.md` defines new rules for swarm orchestration, mandatory concurrent execution, and a clear separation of concerns between coordination (MCP) and execution (Claude Code).
- **Project Initiation (AIROUM):** Added extensive planning, design, and specification documents for a new project: the "AIROUM" educational landing page. This includes:
- Mood boards and multiple HTML design iterations in `.superdesign` and `gallery`.
- Detailed planning documents, technical designs, and pseudocode specs in `.taskmaster`.
- **Configuration Updates:**
- `.mcp.json` now points to `claude-flow` and `ruv-swarm`.
- `.gitignore` is updated to support the new Claude Flow file structure.
This commit is contained in:
187
.superdesign/design_iterations/airoum_1.html
Normal file
187
.superdesign/design_iterations/airoum_1.html
Normal file
@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AIROUM - AI로 여는 새로운 교육 (v2)</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
}
|
||||
:root {
|
||||
--primary-color: #0A2A5B;
|
||||
--accent-color: #00D1FF;
|
||||
--text-primary: #1F2937;
|
||||
--text-secondary: #4B5563;
|
||||
--bg-light: #F9FAFB;
|
||||
--bg-white: #FFFFFF;
|
||||
}
|
||||
.hero-gradient {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, #1E40AF 100%);
|
||||
}
|
||||
.card-gradient {
|
||||
background: linear-gradient(135deg, var(--bg-white) 0%, var(--bg-light) 100%);
|
||||
}
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
||||
}
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-bg-light text-text-primary">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="bg-white/90 backdrop-blur-lg shadow-sm fixed w-full z-10">
|
||||
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
|
||||
<a href="#" class="font-bold text-2xl" style="color: var(--primary-color);">AIROUM</a>
|
||||
<div class="hidden md:flex space-x-8 items-center">
|
||||
<a href="#intro" class="text-text-secondary hover:text-primary transition-colors">회사소개</a>
|
||||
<a href="#programs" class="text-text-secondary hover:text-primary transition-colors">교육 프로그램</a>
|
||||
<a href="#contact" class="bg-primary text-white font-bold rounded-lg py-2 px-5 hover:opacity-90 transition-opacity">문의 및 신청</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header class="hero-gradient text-white min-h-screen flex items-center">
|
||||
<div class="container mx-auto px-6 grid md:grid-cols-2 gap-8 items-center">
|
||||
<div>
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">AI로 여는 새로운 교육의 시대, <br/><span style="color: var(--accent-color);">에이로움</span>이 만듭니다.</h1>
|
||||
<p class="text-lg opacity-90 max-w-xl mb-8">AI 개발자와 교육 전문가가 설계한 실천 중심 교육, 당신의 미래를 지금 준비하세요.</p>
|
||||
<a href="#contact" class="bg-white text-primary font-bold py-3 px-8 rounded-lg text-lg hover:bg-gray-100 transition-colors">무료 상담 신청</a>
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<div class="w-full h-96 bg-white/10 rounded-2xl flex items-center justify-center">
|
||||
<p class="text-white/50">Abstract AI Graphic</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Differentiation -->
|
||||
<section class="py-20">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-3xl font-bold text-center text-primary mb-12">AIROUM만의 차별점</h2>
|
||||
<div class="max-w-3xl mx-auto space-y-8">
|
||||
<div class="flex items-start space-x-6 fade-in">
|
||||
<div class="text-4xl font-bold" style="color: var(--accent-color);">01</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-primary mb-2">실천 중심 교육</h3>
|
||||
<p class="text-text-secondary">수업, 연수, 업무에 곧바로 활용 가능한 실천 중심 맞춤형 교육을 설계합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start space-x-6 fade-in">
|
||||
<div class="text-4xl font-bold" style="color: var(--accent-color);">02</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-primary mb-2">열린 교육 기회</h3>
|
||||
<p class="text-text-secondary">지역 거점 센터 운영을 통해 전문성 있는 AI 교육 기회를 확대합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start space-x-6 fade-in">
|
||||
<div class="text-4xl font-bold" style="color: var(--accent-color);">03</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-primary mb-2">미래 연결 교육</h3>
|
||||
<p class="text-text-secondary">진로·교과·현장을 유기적으로 연결하는 융합적 사고 기반 교육을 제공합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start space-x-6 fade-in">
|
||||
<div class="text-4xl font-bold" style="color: var(--accent-color);">04</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-primary mb-2">검증된 커리큘럼과 강사</h3>
|
||||
<p class="text-text-secondary">교육 현장 경험과 성과로 증명된 전문가 중심의 콘텐츠를 제공합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Programs -->
|
||||
<section id="programs" class="py-20 bg-white">
|
||||
<div class="container mx-auto px-6">
|
||||
<h2 class="text-3xl font-bold text-center text-primary mb-12">교육 프로그램</h2>
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper pb-12">
|
||||
<!-- Card 1 -->
|
||||
<div class="swiper-slide h-auto">
|
||||
<div class="card-gradient rounded-xl shadow-lg p-8 flex flex-col h-full transform hover:-translate-y-2 transition-transform duration-300">
|
||||
<p class="font-bold" style="color: var(--primary-color);">학생 대상</p>
|
||||
<h3 class="text-2xl font-bold my-3">AI 진로·직업 프로젝트</h3>
|
||||
<p class="text-text-secondary text-sm flex-grow">생성형 AI를 활용해 흥미와 강점을 탐색하고 진로를 설계하는 수업</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Add other cards -->
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<section id="contact" class="py-20">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="bg-white p-8 md:p-12 rounded-2xl shadow-2xl max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-center text-primary">무료 상담 및 교육 문의</h2>
|
||||
<p class="text-text-secondary text-center mt-2 mb-8">AI 시대, 더 이상 망설일 이유가 없습니다.</p>
|
||||
<form class="space-y-6">
|
||||
<input type="text" placeholder="성함" class="w-full p-4 bg-bg-light border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary">
|
||||
<input type="tel" placeholder="전화번호" class="w-full p-4 bg-bg-light border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary">
|
||||
<input type="email" placeholder="이메일" class="w-full p-4 bg-bg-light border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary">
|
||||
<textarea placeholder="문의 내용" rows="5" class="w-full p-4 bg-bg-light border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary"></textarea>
|
||||
<button type="submit" class="w-full bg-primary text-white font-bold py-4 px-6 rounded-lg hover:opacity-90 transition-opacity text-lg">문의하기</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-text-primary text-white py-10">
|
||||
<div class="container mx-auto px-6 text-center text-sm">
|
||||
<p>(주)에이로움 | 대표: OOO | 사업자등록번호: 000-00-00000</p>
|
||||
<p class="opacity-70 mt-2">주소: OOO</p>
|
||||
<div class="flex justify-center space-x-6 mt-6">
|
||||
<a href="https://blog.naver.com/ay8812" target="_blank" class="hover:opacity-75 transition-opacity">Naver Blog</a>
|
||||
<a href="https://instagram.com/aiyi_choi" target="_blank" class="hover:opacity-75 transition-opacity">Instagram</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
||||
<script>
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
slidesPerView: 1.2,
|
||||
spaceBetween: 20,
|
||||
centeredSlides: true,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
breakpoints: {
|
||||
640: { slidesPerView: 2.5 },
|
||||
1024: { slidesPerView: 3.5 },
|
||||
}
|
||||
});
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
|
||||
document.querySelectorAll('.fade-in').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user